The CSS text-shadow property

The CSS text-shadow property is similar to the box-shadow property, but the shadow is applied to each letter instead of the boundaries of the element:

text-shadow: 2px 2px 1px rgba(0,0,0,0.4);

The values go in this order: offset-x, offset-y, blur-radius and color.

You can also define multiple shadows:

text-shadow: 45px 25px 4px rgb(25,93,229),
             25px 15px 1px rgb(25,93,229);

๐Ÿ‘‰ Note that, as with the box-shadow property, you can define multiple comma-separated shadows. Unlike with box-shadow however, you canโ€™t define a spread value or use the inset keyword for text shadows. There are ways to create a text shadow that looks like an inset shadow, but the shadow itself wonโ€™t actually be inset.

↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site ๐Ÿ™


Hereโ€™s the result of the 2 text shadows from the above snippet:

I'm just some text in the world with a basic shadow.

I'm just some text in the world with two shadows.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#