How To Give Text Shadow In CSS?

By Gulshan Saini
Published in CSS
May 11, 2020
1 min read

CSS text shadows are an effective tool to add depth, emulate a letterpress effect, or simply enhance the legibility of text. You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown below.


text-shadow: <offset-x> <offset-y> <blur-radius> <color>
  • <offset-x> - Positive value push shadow to right and negative to left
  • <offset-y> - Positive value push shadow to bottom and negative to top
  • <blur-radius> - Optional. Lesser the value, hard is the shadow where as higher the value shadow is more smooth
  • <color> - Optional. Any valid web font color


    'text-shadow': '3px 3px 10px grey',
  Text With Shadow

This states that the shadow extends three pixels below the text, three pixels to the right of the text, blur radius value of ten pixel, and has a base color of grey.

How To Add Multiple Text Shadows In CSS

You can apply multiple shadows to text by specifying a comma-separated list of shadows as shown below

    'text-shadow': '3px 3px 10px grey, -1px -1px 5px red',
  Text With Shadow

Multiple shadows are applied based on their position in stack from top to bottom with the first shadow being the topmost.

Tip: Use text shadow for short texts i.e. one liners or heading only. Do not use text shadow for long running texts. Also, you can make text in thin fonts more legible by applying 1 pixel text shadow.


Previous Article
React - HTTP Get request using browser fetch API

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer



Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media