HomeTutorsContact
CSS
How To Give Text Shadow In CSS?
Gulshan Saini
May 11, 2020
1 min

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

  • <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

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

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?

Subscribe to our newsletter!

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

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media