CSS text-shadow Property

The CSS text-shadow property is used to add shadows to the text. You can choose colors from here: HTML colors.

The text-shadow property is one of the CSS3 properties.

Each shadow is specified by 2 to 3 length values and a <color>. The first value sets the horizontal distance(x-offset), the second value sets the vertical distance(y-offset), the third value sets the blur radius and color value sets the shadow color.

The x-offset and the y-offset are obligatory,the third value is optional.

Initial Value none
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version CSS3
DOM Syntax object.style.textShadow = "1px 3px 3px #8ebf42";

Syntax

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Example of the text-shadow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .shadow {
        text-shadow: 2px 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Some paragraph for example.</p>
    <p class="shadow">Some paragraph with the text-shadow property.</p>
  </body>
</html>

Result

CSS text-shadow Property

Example of the text-shadow property with the “x-offset”, “y-offset”, “blur-radius” and “color” values:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-shadow: 5px 3px 2px #8ebf42;
        font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Values

Value Description Play it
h-shadow The horizontal offset of the shadow. If positive the shadow is drawn on the right side of the text, if negative it is drawn on the left side. Play it »
v-shadow The vertical offset of the shadow (y-axis). If the value is positive the shadow is below the text, if negative it is drawn above. Play it »
blur-radius The blur radius defines how big and how much blurred the shadow is. We can't use negative values. Default value is 0. Play it »
color Allows us to choose a color of the shadow. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Play it »
none No shadow is specified. This is default value of this property. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 4.0+ 10.0+

Practice Your Knowledge

Which of the following statements are true about the CSS text-shadow property?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?