text-shadow
Adds shadow to text.
Syntax
text-shadow: 2px 4px 10px blue;
The shadow is created with a combination of x and y offsets from the element, blur radius, and color:
- value 1 (required): Offsets the x-axis.
- Value 2 (required): Offsets the y-axis.
- Value 3 (optional): Sets the blur radious.
- Value 4 (optional): Sets the color of the shadow.
Note: We can add multiple text shadows by comma separating.
Example 1
Creating a basic text shadow.
h1 {/* x-offset | y-offset */text-shadow: 2px 4px;}
Example 2
Creating a text shadow with blur effect and blue color.
h1 {/* x-offset | y-offset | blur-radius | color */text-shadow: 2px 4px 10px blue;}
Example 3
Adding multiple text-shadows.
h1 {/* x-offset | y-offset | blur-radius | color */text-shadow: 2px 4px 10px #00e9ec, 3px 6px 5px green;}