CSS3 Shadow and Blur Effect

With CSS3, you can add shadow to text and box elements: text-shadow and box-shadow.

You can specify:

1. Horizontal shadow (2px)
2. Vertical shadow (2px)
3. Blur Effect (5px)
4. Color

1. Box Shadow

The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values, a color, and the key term inset for internal shadows. If you fail to specify inset, the default is for the shadow to be drawn outside of the element.

The first value is the horizontal offset. A positive value will create a shadow to the right of the element, a negative value to the left. The second value is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up.

The third value, if included, is the blur distance of the shadow. The greater the value, the more the shadow is blurred. Only positive values are allowed. The fourth value determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow.

The fifth value is the color. If it is omitted, it defaults to the same as the color property of the element. By default, the shadow is a drop shadow occurring on the outside of the box. You can create an inset shadow by adding the word inset to the start of your shadow declaration.

2. Text Shadow

The text-shadow adds shadows to individual characters in text nodes. The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows. The exceptions are that there is no spread, and inset shadows are not permitted.