πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Use Multiple Text Shadows in CSS

How to Use Multiple Text Shadows in CSS

Ferenc Almasi β€’ 2020 November 22 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

A small CSS trick: you can use multiple text-shadows on a text by comma separating them:

Copied to clipboard! Playground
<!-- You can use multiple text shadows by comma separating them -->
<style>
    span {
        color: #FFF;
        font-size: 120px;
        font-weight: bold;
        text-shadow: -3px -3px 0 #FB01FC, 3px 3px 0 #04FBF6;
    }
</style>

<span>ERROR</span>
text-shadows.html

The example above, will produce the following text:

ERROR

If you were wondering, the different values for text-shadow are as follow:

  1. value: Represents the X coordinate of the shadow.
  2. value: Represents the Y coordinate of the shadow.
  3. value: Sets the amount of blur to be used for the shadow.
  4. value: Lastly, you can specify the color of the shadow.

Note that you can also use RGBA values for colors to create semi-transparent shadows.

How to use multiple text shadows in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.