CSS3 Text And Box Shadows

text-shadow

text-shadow property in CSS3 allows you to apply shadow to your text.

text-shadow property take four arguments:

1. First property is the horizontal distance between the text and its shadow. It can have positive or negative value.
2. Second property is the vertical distance between the text and its shadow. It can have positive or negative value.
3. Third property is the z directional distance between the text and shadow. More distance causes more blur. It has to be positive value. This is optional.
4. Last argument is the color of shadow text. This is optional

A text can have multiple shadows. We can provide shadows comma separated.

Check browser support for text-shadow property.

textshadow polyfill can be used to create text shadow in not supported browsers.

box-shadow

box-shadow property allows us to create shadows for any displayed element.

box-shadow property take six arguments:

1. First property is the horizontal distance between the box and its shadow. It can have positive or negative value.
2. Second property is the vertical distance between the box and its shadow. It can have positive or negative value.
3. Third property is the z directional distance between the box and shadow. More distance causes more blur. It has to be positive value. This is optional.
4. Four argument is the size of the shadow. This is optional.
5. Fifth argument is the color of shadow shadow. This is optional
6. When last argument is assigned to “inset” the shadow becomes inner shadow instead of outer shadow(its outer by default).

A box can have multiple shadows comma separated.

Check browser support for box-shadow property.

CSS3 Pie polyfill can used to create box shadow effects in a not supported browser.