CSS3 Box Shadow Generator

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.