Box shadow

CSS3 Box Shadow Generator

Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project.

Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results.
1. Main Settings
2. Optional Settings
Generated CSS:

Box Shadow Explained

The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements.

While the syntax is easy to understand, it is hard to visualise the style using just code. The handy box-shadow tool above allows you to quickly tweak your code and see the effect.

The box-shadow syntax works as follows:

The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. The third value defines the blur of the shadow and the last value sets the colour. The colour can be specified as a hex code, rgb or rgba value.

Optionally you can include an additional parameter after the blur distance:

This defines the spread distance of the shadow. This is essentially the distance the shadow extends before it starts to blur. Increasing the spread causes the shadow to extend in all directions.

Finally, you can add the 'inset' keyword at the start in order to apply the shadow to the inside of the box rather than on the outside:

Supporting Browsers

A lot of browsers now support the CSS3 box-shadow property, although some are still using vendor prefixes. It is advisable to use the vendor prefix syntax as users may still be using older versions of browsers that now support the standard box-shadow syntax.

Browser Supports box-shadow?
Firefox 4+ Full support
Firefox 3.5 - 3.6 Supports use of -moz prefix
Firefox 1-3 No
Safari 5.1+ Full Support
Safari 3.1 - 5.0 Supports use of -webkit prefix
Chrome 10.0+ Full Support
Chrome 4.0 - 9.0 Supports use of -webkit prefix
IE9+ Full Support
Opera 10.5+ Full Support