Preview

In CSS3 box-shadow property is used to add dept perspective to the design of an element eliminating the need for images. Although css3 box-shadow syntax is easy to implement, CSS3 Box Shadow Generator provides a tool to visualise the style without modifying the code every time and refresh the page.

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.