CSS Box Shadow

shadow_featured

I am sure that most of you have already heard about CSS3 and its magical capabilities. Well, today I am going to talk about box-shadow, a really interesting feature which has made the life of web designers a whole lot easier. I remember how annoying it was to try and cast shadow off an element like div, where earlier designers had to use background images to do so. Now, with this new CSS3 feature, casting off shadow became as easy as creating a div element, and I am going to show you how.

box-shadow, is used  for casting shadows off block-level elements such as  divs.

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

[box type=”info”] For the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the prefixes -moz and -webkit to support Mozilla and Webkit.[/box]

So now there are 4 parameters for the box-shadow attribute

  1. The horizontal offset of the shadow, a positive value means the shadow will be on the right of box, negative offset puts a shadow on the left of box.
  2. The vertical offset of the shadow, a positive value means the shadow will be on the bottom of box, negative offset puts a shadow on the top of box.
  3. The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  4. The color for the shadow

Example

Inner Shadow

.shadow {
  -moz-box-shadow: inset 0 0 10px #ccc;
  -webkit-box-shadow: inset 0 0 10px #ccc;
  box-shadow: inset 0 0 10px #ccc;
}

Take note of the use of the inset value.

Example

This concludes our CSS Box Shadow tutorial.

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

CSS Box Shadow
2 votes, 5.00 avg. rating (93% score)
  • Posted in: CSS3
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • Doaa

    Thank you, really helpful tutorial. I am going to use this on my website

  • Esam

    good one :)

    • Husamaldin

      Thanks guys

  • Mike

    Thanks very much for this helpful tutorial Husamaldin, keep it up :-)

  • http://www.webtutorialplus.com/css3-generator.aspx Gunjesh Kumar

    CSS3 properties really make our life simple but to write these codes manually is not a simple process. More because of vendor prefixes and complexity. It is now better to use css3 generators to do this task for you.

    Recently, I have created a CSS3 generator which generates complete style sheet for you in one go. It has the following unique features:

    1. Support for comprehensive CSS3 properties: gradient, box shadow, text shadow, transform, transition, outline, box-resize, multiple columns, etc. along with basic properties of CSS2.0
    2. All these properties can be applied simultaneously to any element
    3. Generate complete style sheet (not just one style) in one go
    4. Share your styles with others (Styles are published along with name and website)
    5. Preview and use the styles generated by other users to create your complete style sheet
    6. Help on all CSS3 properties

    Have a look:

    http://www.webtutorialplus.com/css3-generator.aspx

    • http://www.codersmount.com/ Husamaldin Tayeh

      Thank you Gunjesh for the great tool, I will definitely keep the link so visitors can see it. CSS3 generation tools are good for speeding up the design process. However this blog post was aimed at beginners who are trying to understand how the box-shadow property works.