CSS3 text-shadow Property

Here is a brief explanation on how to add shadow to text using the CSS3 Text Shadow property.

Explanation

Text effect property is used to style texts with different formats and effects.CSS3 contains several new text features.There are:

Property :

text-shadow: h-shadow v-shadow blur-radius color

Usage:


text-shadow: 2px 2px #ff0000;

Definition:

The text-shadow property adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text. To add more than one shadow to the text, add a comma-separated list of shadows.

Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

h-shadow - Required. The position of the horizontal shadow. Negative values are allowed
v-shadow - Required. The position of the vertical shadow. Negative values are allowed
blur-radius - Optional. The blur radius. Default value is 0
color - Optional. The color of the shadow.
none - Default value. No shadow
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.


Example 1:


<div style='text-shadow:5px 5px 1px red;'>
Text Shadow Property</div>

Result:
Text Shadow Property


Example 2:


<div style='text-shadow:5px 5px 10px blue;'>
Text Shadow Property</div>

Result:
Text Shadow Property



Ask Questions

Ask Question