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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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>

Try it Yourself »

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.