Text-shadow | CSS-Tricks

CSS Almanac → Properties → T → text-shadow

Sara Cope on Sep 6, 2011 (Updated on Jan 27, 2023)

p { 
  text-shadow: 1px 1px 1px #000;
}

You can apply multiple text shadows by comma separating

p { 
  text-shadow: 1px 1px 1px #000, 
               3px 3px 5px blue; 
}

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

Also, remember you can use RGBa or HSLa values for the color, for example, a 40% transparency of white:

p { 
  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); 
}

Examples

More Information

MDN Docs

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2+	1.1+	3.5+	9.5+	10+	any	any

Erick

# January 16, 2013

Don’t know why, but it only works in android 2.2.2 if i set the 3rd property different of zero.
Ex.:
text-shadow: 1px 3px 0 red; /does not work/ text-shadow: 1px 3px 1px red; /works/

Don

Permalink to comment# May 10, 2013

Hi Erik,

The 0 would also need the px with it as well so text-shadow: 1px 3px 0px red; should work.
ben

Permalink to comment# January 4, 2016

hi the 0 have to have a px on it

Ramendra

# November 19, 2014

Thanks it help me!

cissy

# March 31, 2015

very good

Ann

# September 27, 2015

Very cool, thanks for your examples! I didn’t know it was possible to have these effects with just text-shadow. So I can have multiple text-shadow styles as long as they are comma-separated?

Anji

# November 16, 2015

Thanks this is working fine

Anji

Permalink to comment# November 16, 2015

here we have more text effect
http://ustutorials.com/css3-tutorials/css3-text-shadow.php

HM100

# August 6, 2017

I know this also works with four value things. However:

h2 {
 color:#f9f9f9;
 text-shadow:0 0 10px 3px #cf4ad9;
 font-family:"Verdana Pro", Verdana;
}

gets working in Edge/IE but not in other browsers. So with four values it only works on Microsoft browsers. Thank you

Ajay

# September 1, 2020

.CBSE {
width: 30%;
height: 150px;
background: cyan;
color: #000;
margin: 1%;
position: relative;
box-shadow: 0px 0px 6px #000;
border-radius: 5px;
}
.CBSE p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
text-shadow: 3px 3xp 5px #000000;
}
.shadow {
text-shadow: 3px 3px 5px #000;
}

/* text shadow of p not working */

CBSE

Geoff Graham

Permalink to comment# September 2, 2020

Hey there! Check your syntax: Changing 3xp to 3px should fix things up. One incorrect value will render the entire property invalid. https://codepen.io/geoffgraham/pen/dyMVZVe

Examples

More Information

Browser Support

Comments

Leave a Reply Cancel reply