References

Beginner-friendly references for web development, with live, editable examples.

The CSS text-shadow property

Property CSS All modern browsers Updated
Quick answer

The CSS text-shadow property adds a shadow behind text. The value is offset-x offset-y blur color, e.g. text-shadow: 0 1px 2px rgb(0 0 0 / 0.4). There is no spread, but you can layer several shadows with commas to build glows, outlines and depth.

Overview

text-shadow casts a shadow behind text, in the same spirit as box-shadow but for letterforms. The value lists a horizontal offset, a vertical offset, an optional blur, and a color — text-shadow: 0 1px 2px rgb(0 0 0 / 0.4) gives the subtle drop that lifts white text off a busy background.

There is no spread value here, but the comma trick from box-shadow still applies: list several shadows and they stack. Four hard shadows offset one pixel in each direction make a poor-man's text outline; a soft, colorful, zero-offset shadow makes a neon glow. It is a small property with a surprising range.

The most practical use is legibility. A faint dark shadow under light text over a photo can rescue contrast that would otherwise fail — though, as with any contrast fix, it is a backup, not a license to put light text on a busy image and hope. Keep shadows subtle for body text; they are easy to overdo.

Syntax

selector {
  text-shadow: offset-x offset-y blur color;
}

/* lift light text off a background */
.hero-title {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

Values

The text-shadow property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
offset-x How far the shadow moves right (negative moves it left).
offset-y How far the shadow moves down (negative moves it up).
blur How soft the shadow is. Optional; defaults to 0 (sharp).
color The shadow color, often a translucent black.
multiple Comma-separate several shadows for outlines or glows.

Example

Live example 
<style>
  .hero { background: linear-gradient(135deg, #1c7ce9, #6d28d9); padding: 32px; border-radius: 12px; text-align: center; }
  .hero h2 { margin: 0 0 10px; color: #fff; font: 800 26px system-ui, sans-serif; text-shadow: 0 2px 6px rgb(0 0 0 / 0.45); }
  .glow { color: #fff; font: 800 20px system-ui, sans-serif; text-shadow: 0 0 10px #38bdf8, 0 0 20px #38bdf8; }
</style>
<div class="hero">
  <h2>Soft drop shadow</h2>
  <span class="glow">Neon glow</span>
</div>

Best practices

  • Keep shadows subtle on body text — a small offset and a translucent color read as polish, while heavy shadows look dated.
  • Use a faint dark shadow to shore up the legibility of light text over images, but still aim to meet contrast on the background itself.
  • Layer shadows with commas for glows or pseudo-outlines; the first listed sits on top.
  • Prefer translucent colors like rgb(0 0 0 / 0.4) so the shadow blends on any background.

Frequently asked questions

How do I add a shadow to text in CSS?
Use text-shadow, e.g. text-shadow: 0 1px 2px rgb(0 0 0 / 0.4). The values are horizontal offset, vertical offset, blur and color.
What is the difference between text-shadow and box-shadow?
text-shadow shadows the text glyphs; box-shadow shadows the element's rectangular box. text-shadow also has no spread value.
How do I create a glow effect on text?
Use a zero-offset, blurred, colored shadow, e.g. text-shadow: 0 0 8px #38bdf8. Stack a few for a stronger glow.
Can text have more than one shadow?
Yes. Separate them with commas, e.g. text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, which is one way to fake an outline.
text-decoration text-transform