CSS3 shadow

01.Jul.2010

To add CSS3 shadow to an element, use following code:

1
2
3
4
box-shadow: 10px 10px 20px #888;
-webkit-box-shadow: 10px 10px 20px #888;
-moz-box-shadow: 10px 10px 20px #888;
padding: 65px 5px 5px 10px;

Explanation of CSS3 shadow snippet:

CSS3 shadow is written like box-shadow: Xpx Ypx Lpx #COLOR; where:
box – is has specific prefix for each browser (-moz-, -webkit-, etc…)
Xpx – is x-axis shadow padding
Ypx – is y-axis shadow padding
Lpx – is length of shadow, or amount of CSS3 shadow blur
#COLOR – is color of CSS3 shadow

Example of CSS3 shadow:

Sample CSS3 shadow