X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-shadow Property

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

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

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

An example where the x-offset, y-offset, blur-radius and color are specified:

Example

<!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 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 It makes the property use its default value.
inherit It inherits the property from its parents element.



Do you find this helpful?

Related articles