Style text shadows four ways — subtle depth, neon glow, sticker outline and retro 3D stacking — previewed on your own text with the composed declaration ready to copy.
Generated locally in your browser — your colors, settings and code never leave this page.
Four text-shadow disciplines
Single — the subtle depth that lifts hero text off imagery. Neon — three stacked glows at widening blur; layering is what makes it luminous. Outline — four hard diagonal shadows faking a stroke. 3D stacked — repeated offsets building retro depth. Type your own text, set its color, tune the sliders, copy the declaration.
Worked example (neon)
.neon {
color: #e0f2fe;
text-shadow: 0 0 8px rgb(34 211 238 / 0.9),
0 0 16px rgb(34 211 238 / 0.9),
0 0 32px rgb(34 211 238 / 0.9);
}Readability rules
- Body text: essentially never — shadows blur letterforms at reading sizes. If text over imagery needs help, prefer a scrim (see the opacity tool‘s overlay preset) over heavy shadows.
- Display headings: the playground. Keep the “Subtle depth” numbers (small offset, low opacity) for anything users must actually read.
Outline honesty
- The four-shadow outline is thin by nature; thick outlines belong to -webkit-text-stroke (well-supported despite the prefix) — mentioned because pretending shadows do everything helps nobody.
Performance
- Cheap at rest; glow-blur across huge headlines is the only case worth a second thought, and animating text-shadow is best avoided.
How to use the CSS Text Shadow Generator
- Pick a style — single, neon glow, outline or 3D stacked — and tune the sliders.
- Type your own preview text and set its color.
- Copy the text-shadow declaration.
Frequently asked questions
How does the neon effect work?
Three stacked glows at increasing blur (1×, 2×, 4×) of the same color — layering is what makes it luminous; a single blurred shadow just looks smudged.
Can text-shadow outline text?
Approximately: four hard shadows offset in each diagonal fake a thin outline. For thick outlines, -webkit-text-stroke does it properly (with the usual prefix caveat) — the generated comment mentions when you hit the limit.
Should body text have shadows?
Almost never — shadows reduce legibility at reading sizes. Reserve the decorative styles for display headings; on body text, if you must, keep it to the "Subtle depth" preset numbers.
