CSS text-shadow (Add Shadow behind the Text)

The CSS text-shadow property is used to define/add shadow behind the text. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{text-shadow: 4px 4px 8px maroon;}
   </style>
</head>
<body>
   
   <div class="myd">
      <h2>The text-shadow Property</h2>
      <p>This is an example of text-shadow property in CSS.</p>
   </div>
   
</body>
</html>

Output

The text-shadow Property

This is an example of text-shadow property in CSS.

Note - We can define multiple shadows to an element, where each shadow must be separated using comma. For example:

.myd{text-shadow: 4px 4px 8px maroon, 6px 8px 10px blue;}

CSS text-shadow Syntax

The syntax of text-shadow property in CSS, is:

text-shadow: horizontalShadow verticalShadow blurRadius color;

From all the four, the horizontalShadow and verticalShadow are required.

The default value of blurRadius is 0. Whereas the default value of color is the color of text.

We can also use following keywords to define the text-shadow property in CSS:

none - used to apply no shadow. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS text-shadow Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{border: 1px solid red; padding: 14px;}
      .a{text-shadow: 0px 3px;}
      .b{text-shadow: 2px 0px;}
      .c{text-shadow: 2px 3px;}
      .d{text-shadow: 2px 3px red;}
      .e{color: blue; text-shadow: 1px 2px;}
      .f{text-shadow: 0px 0px 3px red;}
      .g{text-shadow: 0px 0px 15px red;}
      .h{text-shadow: 1px 2px 6px blue;}
      .i{text-shadow: 4px 12px 8px gray;}
      .j{text-shadow: -4px -12px 8px gray;}
      .k{text-shadow: 4px 12px 8px blue, -4px -12px 8px red;}
   </style>
</head>
<body>
   
   <h2 class="a">text-shadow: 0px 3px</h2>
   <h2 class="b">text-shadow: 2px 0px</h2>
   <h2 class="c">text-shadow: 2px 3px</h2>
   <h2 class="d">text-shadow: 2px 3px red</h2>
   <h2 class="e">color: blue; text-shadow: 1px 2px</h2>
   <h2 class="f">text-shadow: 0px 0px 3px red</h2>
   <h2 class="g">text-shadow: 0px 0px 15px red</h2>
   <h2 class="h">text-shadow: 1px 2px 6px blue</h2>
   <h2 class="i">text-shadow: 4px 12px 8px gray</h2>
   <h2 class="j">text-shadow: -4px -12px 8px gray</h2>
   <h2 class="k">text-shadow: 4px 12px 8px blue, -4px -12px 8px red</h2>
   
</body>
</html>