CSS Text Shadow Generator

Add depth, glow, or an outline to headings with CSS text-shadow. Stack several shadows, preview them on your own text, and copy the CSS and HTML.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS
HTML

How to use the Text Shadow Generator

  1. Type your Preview text and set the Font size and Text color.
  2. Pick a preset or edit the Shadow layers: offsets, Blur, Color, and Opacity.
  3. Press Copy CSS, and Copy HTML if you want the sample markup.

How it works

  • Each layer is x y blur color. Unlike box-shadow, there is no spread and no inset.
  • Layers are comma-separated and drawn in order, with the first on top.
  • A glow is a shadow with no offset and a large blur in a bright color. An outline is four 1px shadows with no blur, pushed up, down, left, and right.

Examples

.headline {
  color: #ffffff;
  font-size: 64px;
  font-weight: 700;
  text-shadow: 0 0 8px #f0b90b, 0 0 24px rgba(240, 185, 11, 0.8);
}

The Retro preset stacks 3px 3px 0 #cf304a, 6px 6px 0 #1f5fbf for a layered print look.

Limitations

  • Text shadows lower the contrast of body text. Use them on headings and keep text readable (WCAG asks for 4.5:1 for normal text).
  • Outlines made from shadows look rough on thin fonts. -webkit-text-stroke gives a cleaner outline in modern browsers.

Frequently asked questions

How do I make glowing text in CSS?

Use the Glow preset: shadows with 0 offset, a large blur, and a bright color. Two layers, one tight and one wide, look best.

Can I add an outline to text with text-shadow?

Yes, with four small shadows in each direction (the Outline preset). For thick outlines, -webkit-text-stroke works better.

Does text-shadow affect accessibility?

It can. A shadow that blurs letter edges makes text harder to read. Check the contrast between text and background.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the Text Shadow Generator.