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

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
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.
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.
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.
color Allows us to choose a color of the shadow. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
none No shadow is specified. This is default value of this property.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

4.0+ 12.0+ 3.5+ 4.0+ 10.0+


Do you find this helpful?

Related articles