CSS text-shadow Property

❮ Previous Reference Next ❯

Example

p {
  text-shadow: 1px 1px red;
}





Hello World!

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Meaning

The text-shadow property adds shadows to text.

It accepts a comma-separated list of shadows to be applied to the text and any of its decorations.

Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Default value:none
Inherited:Yes
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.textShadow="h-shadow v-shadow blur-radius color|none|initial|inherit|revert|revert-layer|unset";



Standard Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit|revert|revert-layer|unset;



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Property Values

The following table describes the values of this property.

Value Description
h-shadow (Required) Specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.
v-shadow (Required) Specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
blur-radius (Optional) Default value is 0 The blur radius.
color (Optional) The color of the shadow.
none This is default value. No shadow.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  text-shadow: none;
}



More Examples

The following example add vertical and horizontal shadow effects:

Hello World!

Example

h1 {
  text-shadow: 2px 2px;
}



The following example add vertical, horizontal, and red shadow effects:

Hello World!

Example

h1 {
  text-shadow: 2px 2px red;
}



The following example add vertical, horizontal, blur, and red shadow effects:

Hello World!

Example

h1 {
  text-shadow: 2px 2px 10px red;
}



The following example make text white and create dark shadow effects:

Hello World!

Example

h1 {
  color: white;
  text-shadow: 2px 2px 10px red;
}



The following example make text to red neon glow shadow:

Hello World!

Example

h1 {
  text-shadow: 0 0 3px red;
}



The following example create multiple shadow effects by making a red, green, and blue shadow effects:

Hello World!

Example

h1 {
  text-shadow: 1px 1px 1px red,
               5px 5px 5px green,
               10px 10px 10px blue;
}

Note - To add more than one shadow to the text, you can add a comma-separated list of shadows.




The following example create border shadow effects:

Hello World!

Example

h1 {
  color: white;
  text-shadow: -1px -1px black, 1px 1px black;
}
❮ Previous Reference Next ❯