box-shadow
Is used to assign one or more shadows to an element.
Compatibility
-moz-box-shadowFirefox 3.6-webkit-box-shadowSafari 5box-shadowFirefox 4+ Safari 5.1+, Chrome 10+ Internet Exlorer 9+ Opera 11+ W3C
Supported by all modern browsers. For detailed compatibility info see caniuse.com.
- Firefox 3.6
- Firefox 4+
- Safari 5
- Safari 5.1+, Chrome 10+
- Internet Explorer 9+
- Opera 11+
- Official syntax
No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.
General description
Multiple shadows can be assinged comma separated.
box-shadow: 1 inset 2 4px 3 4px 4 16px 5 10px 6 #000
- 1 Optional. When set the shadow is drawn inside the element and will be no drop shadow. When both the offset values are positive the shadow runs from top left to bottom right. When negative it starts at the bottom right corner (not depicted).
- 2 The horizontal offset of the shadow (x-axis). If positive the shadow is drawn to the right side of the element, if negative it is drawn to the left side.
- 3 The vertical offset of the shadow (y-axis). If positive the shadow is drawn below the element, if negative it is drawn above.
- 4Optional. The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. Negative values are not allowed. If not set the shadow’s edges are sharp (which corresponds to a value of
0). - 5Optional. The spread distance makes the shadow bigger in all directions. The shadow is expanded by the given value. Negative values cause the shadow to contract (not depicted).
- 6 The color of the shadow.
rgba/hslacolor values are possible.
Examples
Expanded shadow to the left
box-shadow: 1 -5px 2 5px 3 15px 4 7px 5 #000
- 1 Horizontally the shadow gets drawn to the left side (minus value).
- 2 Vertical offset. As it is positive the shadow gets drawn downwards.
- 3 The blur radius.
- 4 The spread distance.
- 5 A black shadow.
Inset shadow
box-shadow: 1 inset 2 6px 3 6px 4 12px 5 #000
- 1 The shadow is inset.
- 2 Horizontal offset.
- 3 Vertical offset.
- 4 The blur radius.
- 5 A black shadow.
Further reading
For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).
Great site, very nice looking and very helpful.
A small note: I think there is a error. In the Text-shadow chapter, in the General description section, the example is “background: 5px 5px 10px #646464″.
If I’m not mistaken, it should be “text-shadow: 5px 5px 10px #646464″.
Thank you very much for the tip! It indeed should mean “text-shadow: 5px 5px 10px #646464″. Stupid copying error. I already corrected the fault.
Gracias!! Yo también encuentro útil este sitio!
El CSS es mi pesadilla, pero aquí está muy bien explicado. Muchas gracias!
For the ones, that don`t speak spanish (like me):
“Thanks! I also find this site useful!
CSS is my nightmare, but here it is explained very well. Thank you very much!”
Thank you very much for the compliment.
Brilliantly explained. Thanks for the time and effort you’ve put in this, I’ll definetly use it in the future.
By the way, just a quick correction: IE9 still doesn’t support text-shadow CSS3 property.
This really saved me, this effects are great for doing in-depth design. Thank you so much, for real, this was explained SO MUCH EASIER than the others
box-shadow
General description
…..
2 The vertical offset of the shadow (y-axis). If positive the shadow is drawn above the element, if negative it is drawn below.
….
is there a typo here?
I think it should be ” If positive the shadow is drawn below the element, if negative it is drawn above.”
or it’s just my misunderstanding? my poor english…
Thank you very much for the tip! Of course it should mean “If positive the shadow is drawn below the element, if negative it is drawn above.” I have corrected it.
There is a lill fault in your description.
i even wrote to the w3c css mailinglist…
have a view in the specs:
http://www.w3.org/TR/css3-background/#the-box-shadow
it says:
= inset? && [ {2,4} && ? ]
so the ‘inset’ keyword, if needed, must come first! Otherwise the validator will not validate the stylesheet!
Thanks for the tip, Andreas! I have adapted the description.
Honestly I didn’t care about the order of the values as long as everything looked fine when testing. But good to know that it actually is important (although I normally don’t care about validating the CSS).
thanks for sharing.This effect really save my time . but ie9 is not correctly showing this effect rather than other browsers.
Is it possible to add a box shadow of equal distance around each edge?
Also might it be possible to have it not show on the top side?
I have a white box (white foreground on top of charcoal background) to start at the top of the site, extend down to the bottom, with a footer below. I want a shadow on the left, right, and bottom edges. And I want the shadow to appear as if you are looking straight at something with equal shadows on all sides.
That’s no problem at all. Just set the horizontal and vertical offset to 0 and the blur radius to something bigger than 0.
box-shadow: 0 0 10px #afafafUnfortunately it’s not possible to spare the top side as far as I know. But since your box starts at the top of the page the top part of the shadow doesn’t get displayed anyway.
Actually, it is possible to have a shadow on three sides if you set the blur radius to 0 and you use the offsets and the spread properly. Something like this:
box-shadow: 0 10px 0 10px #000;But then you don’t have equal shadows on all three sides and the shadow doesn’t look much like a shadow anymore, more like a border, as it can be seen in this test of mine (and, in this case, it can be useful for simulating multiple borders.).