CSS3 box-shadow property
In this tutorial I will show you how to use the CSS3 box-shadow property to add shadows to a box. For box here I mean the box each HTML element is included in by the CSS box model (if you want to know more about the CSS box model read this tutorial).
Cross-browser compatibility of box-shadow property
Let me tell you which browsers support the box-shadow property so that you know if you can have fun playing with it with your browser.
Box-shadow is supported by Firefox (since the latest 3.5 version), Safari (since version 3.1) and by Chrome (since its first version). It’s not supported by Internet Explorer (maybe in 9?) and Opera (it should be supported in version 10).
Warning: since the box-shadow property is not standard yet, you’ll need to add a prefix before its name depending on the browser you want to experiment it with. To use it with Firefox the property must be declared as -moz-box-shadow, with Safari and Chrome it must be -webkit-box-shadow.
The box-shadow property values
Box-shadow can take up to four numeric values:
- the first value is the horizontal offset of the shadow;
- the second value is the vertical offset of the shadow;
- the third value represents the shadow blur radius;
- the fourth value represents the shadow spread radius;
The box-shadow property can also take two non-numeric values:
- the exadecimal value of the shadow color;
- the inset word: if assigned, the outer shadow becomes an inner shadow.
The box
Let’s create a box to experiment the CSS3 box-shadow property with. For the HTML we simply add an empty div that will work as our box:
<body> <div id="box"></div> </body>
We add some colors and measures in the CSS:
body { background-color:#EBEBDF; }
#box {
width:300px; height:300px;
margin:100px auto 0;
/* -moz-box-shadow:inset 10px 10px 40px 20px #fff;
-webkit-box-shadow:10px 10px #555;*/
background-color:#6B86A6; }
Here is our box:
The offset
Let’s add the box-shadow property in the CSS file. Note that for this tutorial I’m using the declaration needed to work with Firefox; if you want to try it with Safari or Chrome just remember to replace webkit with moz.
We only assign a color and the offset values to begin with:
#box { -moz-box-shadow:10px 10px #aaa; }
Here is what we get:
We’ve created a shadow that is offset 10px both horizontally and vertically via CSS.
We could also use negative values: doing so offsets the shadows upwards and rightwards rather than downwards and leftwards. If we assigned the following values to the box-shadow property:
#box { -moz-box-shadow:-10px -10px #aaa; }
we would get something like this:
The shadow is still solid in both cases though. We’ll blur it in the next step.
The blur radius
Let’s add a third value to the same box-shadow property previously declared. This third value represents the shadow blur radius:
#box { -moz-box-shadow:10px 10px 10px #aaa; }
You can see how the shadow is blurred by 10px:
The greater this value the more the shadow is blurred. Negative values are not allowed for blur radius.
The spread radius
I think it’s easier for you to see how spread radius works if we cancel the blur radius for the moment. So let’s make the blur radius 0 and add a fourth 5px value for the spread radius:
#box { -moz-box-shadow:10px 10px 0 5px #aaa; }
Here is what we get:
The shadow has spread by 5px on each side. In the following image I have visualized this by coloring the expansion with a darker gray:
The dark 5px border you see on each side of the shadow is the result of assigning a 5px spread radius via the box-shadow property in the CSS. Remember you won’t see this color difference though: the effective result is the one you see in the previous image.
You can also use negative values for spread radius. If you do, the shadow will contract itself rather than expand:
We can now try applying both a blur radius and a spread radius to see the result:
The inset value
CSS3 also give the option to create an inner shadow exclusively via CSS. To do this, you just need to declare the inset value before all the other ones:
#box { -moz-box-shadow:inset 10px 10px 10px 5px #aaa; }
Here is what we get:
More on crossbrowser compatibility
After going through all the options given by the CSS3 box-shadow property, I should tell you one more thing about crossbrowser compatibility issues. Firefox is the only browser that supports all of the box-shadow property values, while Safari and Chrome don’t support the possibility to apply a spread radius and to create an inner shadow. These two browsers only allow you to offset the shadow, blur it and give it a color:
#box { -webkit-box-shadow:10px 10px 10px #aaa; }
The secret to a good shadow
In this tutorial I’ve created a very visible shadow to clearly show you how the CSS3 box-shadow property works. The secret to a good shadow though is subtlety. For our example, the following combination would have been a good choice:
#box { -moz-box-shadow:3px 3px 12px 0 #999; }
See for yourself:
Experiment
Have fun playing with the box-shadow property, and experiment. You could for example use dark colors for your elements and a light color for the shadow, turning it into a glow.
Although you can apply a shadow to each HTML element, remember to only use it if appropriate and to create subtle shadows ;)
So, what do you think?
Did you know about the CSS3 box-shadow property? Maybe you have already used it on one of your web design projects? Share your thoughts in the comments!
Very useful article… I love your posts and your blog design!
July 11, 2009 at 7:03 pm
Thanks ;)
July 11, 2009 at 7:06 pm
Awesome and yes, very clean design.
July 12, 2009 at 7:34 am
Thank you Alexis!
July 12, 2009 at 9:42 am
[...] Visit Source. [...]
July 12, 2009 at 9:02 pm
Thanks for the article and ditto on the blog design A+
July 13, 2009 at 3:06 am
[...] list of CSS frameworks you probably ever seen 10 Greatest Web Design Tools for Web Standards CSS3 box-shadow property Ten Simple Rules for Choosing the Perfect CMS + Excellent Options Different Ways To Format CSS 12 [...]
July 18, 2009 at 1:48 pm
[...] This post was Twitted by bcmurty [...]
July 19, 2009 at 7:22 am
[...] list of CSS frameworks you probably ever seen 10 Greatest Web Design Tools for Web Standards CSS3 box-shadow property Ten Simple Rules for Choosing the Perfect CMS + Excellent Options Different Ways To Format CSS 12 [...]
August 3, 2009 at 3:42 pm
CSS3 box-shadow property…
In this tutorial I will show you how to use the CSS3 box-shadow property to add shadows to a box….
August 6, 2009 at 2:12 am