HomeTutorsContact

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.

Syntax

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

Example

<h2
  style={{
    'text-shadow': '3px 3px 10px grey',
  }}
>
  Text With Shadow
</h2>

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

<h2
  style={{
    'text-shadow': '3px 3px 10px grey, -1px -1px 5px red',
  }}
>
  Text With Shadow
</h2>

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.


Tags

#css
Next Article
How To Create Glowing Text In CSS?

Related Posts

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

Gulshan Saini

Fullstack Developer

Topics

Angular
JavaScript
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media