How to Use Multiple Text Shadows in CSS

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

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

Copied to clipboard!

The example above, will produce the following text:


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


Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x 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.