CSS text-shadow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

text-shadow: 1px 1px 2px purple;

text-shadow: 0 0 2px #F10E1F;

text-shadow: 4px 4px blue;

text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);

text-shadow: 3px 4px 7px rgba(81,67,21,0.8);

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

HTML

<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>

CSS

.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;
}

Result

Editor