In this article, we’ll walk you through different text-shadow examples using CSS.

Text Shadow Using CSS

The text-shadow CSS property adds shadows and layers to the text. Adding text shadow to the text can enhance, highlight, or increase the visual appeal of your app’s text. This CSS property accepts a comma-separated list of shadows to be applied to the text.

Syntaxes of the text-shadow CSS Property

MDN Web Docs define these values as:

: Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color’s value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

: Required. These values specify the shadow’s distance from the text. specifies the horizontal distance; a negative value places the shadow to the left of the text. specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of .

: Optional. This is a value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Here are some awesome text-shadow examples that can enhance the UI of your website to the next level. Make sure to import the mentioned fonts in your CSS file from Google Fonts.

1. The Sea Green

Use the following CSS to create the above text shadow:

2. Classy Red

Use the following CSS to create the above text shadow:

3. Neon Box

Use the following CSS to create the above text shadow:

4. Slate Skateboard

Use the following CSS to create the above text shadow:

5. Ruby Seafoam

Use the following CSS to create the above text shadow:

6. Rose Water

Use the following CSS to create the above text shadow:

7. Unknown Iris

Use the following CSS to create the above text shadow:

8. The Sage of Old School

Use the following CSS to create the above text shadow:

9. The Grey Neumorphism

Use the following CSS to create the above text shadow:

10. Lemonade Peach

Use the following CSS to create the above text shadow:

11. The Premium Dark

Use the following CSS to create the above text shadow:

Add Life to Your Product Using CSS

In this article, you learned how to use the CSS text-shadow property. You can use these stylish text shadows to add life to your product. Also, if your website’s boxes and divs still look bland, you can spruce them up using the CSS box-shadow property.