CSS text-shadow Property

Description

The text-shadow CSS property is used to add a shadow effect to text elements on a web page. It allows you to create a visual depth by specifying the horizontal and vertical offset of the shadow from the text, its blur radius, and the color of the shadow. By adjusting these parameters, you can create various text effects, from subtle enhancements to more dramatic and eye-catching designs. This property is particularly useful for improving text legibility and adding visual appeal to headings, titles, and other textual content on websites.

Initial value
none
Applies to
All elements
Inherited
Yes
Computed value
A color plus three absolute lengths
Animatable
Yes
JavaScript syntax
object.style.textShadow

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

text-shadow: none | <length>{2,3} && <color>

Values

  • noneNo shadow is applied.
  • <length>This is a <length> value. The first value represents offset-x and the second value represents offset-y, these values are required. The third value represents the blur radius, the higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.
  • <color>Optional. Can be specified either before or after the offset values. If the color is not specified, a browser chosen color will be used.

Example

<div class="test">Rainbow text</div> 
<div class="test2">Text with added shadow</div>
<div class="test3">Text with added shadow</div>
<div class="test4">Text with added shadow</div>
.test {
   text-align: center; 
   line-height: 150px;
   text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; 
} 
.test2 {
   text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); 
} 
.test3 {
   text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5); 
} 
.test4 {
   text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5);
} 
.test, .test2, .test3, .test4 {
   font-size: 1.5em;
}

Browser Support

The following table will show you the current browser support for the CSS text-shadow property.

Desktop
Edge Chrome Firefox Opera Safari
1223.59.51.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 2nd January 2024