CSS text-shadow Property

The text-shadow property adds a shadow effect to text.

The details of the shadow are specified by a number of values.

These include x-offset, y-offset, blur-radius, and color.

Example

#

Text with a drop shadow effect.

This text has a shadow.

<p style="text-shadow: 2px 2px #ccc; font-size: 22px;">
  This text has a shadow.
</p>

Using text-shadow

The text-shadow property adds a shadow effect to the text and its decorations.

Text shadow accepts up to four values:

  • The first value is the x-offset of the shadow from the text.
  • The second value is the y-offset of the shadow from the text.
  • The third value is the blur radius or size of the shadow.
  • The last value specifies the color of the shadow.

If no color is provided, it inherits the text color.

Only x-offset and y-offset are required to get a shadow effect.

Syntax

text-shadow: x-offset y-offset blur-radius color | 
             none | initial | inherit;

Values

#

Value Description
none Default, no shadow.
x-offset Required, horizontal shadow position. Accepts negative values.
y-offset Required, vertical shadow position. Accepts negative values.
blur-radius Optional, blur radius. Default value is 0.
color Shadow color.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different text-shadow values.

Text with a shadow

<style>
  .text-shadow-example {
    font-size: 22px;
    text-shadow: 2px 2px 8px orangered;
  }
</style>

<p class="text-shadow-example">
  Text with a shadow
</p>


Outline text effect

White text with a shadow creates an outline effect.

Outline effect with white text and shadow

<style>
  .outline-text {
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }
</style>

<p class="outline-text">
  Outline effect with white text and shadow
</p>

Did you know?

Did you know?

Creating inner text-shadow

An inner shadow created with a negative offset value.

Text with an inner shadow

<style>
  .inner-shadow {
    text-shadow: -1px -1px #444;
    font-size: 40px;
    font-weight: bold;
    color: aliceblue;
  }
</style>

<p class="inner-shadow">
  Text with an inner shadow
</p>

Browser support

This table shows when text-shadow support started for each browser.

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
10.0 Sep 2012
Opera
9.6 Oct 2008
Safari
4.0 Jun 2009

You may also like

Guides