text-shadow

christian.dinh2481 total contributions
Published Jul 28, 2021Updated Sep 3, 2021
Contribute to Docs
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;}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- asiqurr43 total contributions
- christian.dinh
- Anonymous contributor
- asiqurr
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.