Text shadow
Preview only — the exported CSS carries the text color and shadow, never a background.
What text-shadow can do
The CSS text-shadow property takes four parts — horizontal offset, vertical offset, blur
radius and color — and unlike box-shadow it has no spread value. That short signature hides
how much range it has: comma-separate several shadows and the same property produces a neon glow, a
layered 3D extrusion, a faux outline, a long diagonal shadow or a subtle letterpress emboss. This css
text shadow generator builds those stacks visually on a live headline, so you can see the effect on real
letterforms instead of guessing at numbers.
How to build your effect
- Start from a preset — Soft lift, Neon glow, Hard offset, Retro 3D, Outline, Long shadow or Emboss.
- Type your own headline in the Text drawer, then set the size, weight and glyph color.
- Open Layers to select a layer chip and tune its offset X and Y, blur, opacity and color — or add layers up to eight.
- Flip the Surface toggle between light and dark: a white outline is invisible on white, and glows only read on dark.
- Copy CSS for a paste-ready rule, Copy Tailwind for the arbitrary-property form, or Copy HTML for markup plus styles together.
Neon and glowing text
A glowing text effect is not one shadow but several stacked at zero offset with growing blur radii, all sharing a hue, under a near-white glyph on a dark background. Each successive layer throws a wider, fainter halo, so the light falls off gradually the way real neon does rather than stopping at a visible edge. The Neon glow preset here ships that four-layer stack — recolor any layer and the whole glow re-tints, or pull the outermost blur down for a tighter, harder-edged sign. Because it is pure CSS on real text, the result stays selectable, translatable and crawlable, which an image of glowing text never is.
Text shadow in Tailwind
This trips people up constantly, and the reason is simple: Tailwind v3 has no text-shadow
utility at all, so writing a class like text-shadow-lg silently does nothing. Tailwind v4
added a text-shadow-* scale, but its presets are single shadows and cannot express a
multi-layer stack. The Copy Tailwind button here therefore emits the arbitrary-property form,
[text-shadow:…], which carries every layer and works on v3 and v4 alike — with a comment in
the snippet saying exactly that, rather than handing you a class that quietly fails on your project.
Keep it readable
Text shadows sit directly on top of the thing a reader is trying to decode, so they cost legibility faster than shadows on a card do. Heavy blur smears the letterform edges, and a glow at body-copy size is genuinely hard work for many readers. Treat these effects as display styling for large headings, keep the shadow subtle anywhere below heading size, and make sure the text color alone still passes contrast against its background — the shadow should never be what rescues an unreadable pairing. Our contrast checker covers that half of the job.
Frequently asked questions
How do I add a text shadow in CSS?
Use the text-shadow property: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). The four parts are horizontal offset, vertical offset, blur radius, and color. Unlike box-shadow there is no spread value — text-shadow takes offsets, blur and color only. Stack several shadows by comma-separating them, which is how the 3D, outline and neon effects here are built.
How do I make a neon glow text effect?
A neon glow is several shadows at zero offset with increasing blur, all in the same hue, over a light-colored glyph on a dark background. Each layer adds another halo further from the letterform, so the glow falls off smoothly instead of stopping at a hard edge. Pick the Neon glow preset here to get that stack — white text with four cyan halos — then change the layer colors to re-tint the whole glow.
Why is my text-shadow not working in Tailwind?
Because Tailwind v3 ships no text-shadow utility at all — there is no text-shadow-lg to apply, so the class silently does nothing. Tailwind v4 added a text-shadow-* scale, but its presets cannot express a multi-layer stack. The Copy Tailwind button here emits the arbitrary-property form, [text-shadow:…], which works on both v3 and v4 and carries every layer.
How do I create a text outline with text-shadow?
Place four hard shadows — no blur — one pixel up, down, left and right of the glyph in the outline color. That approximates a stroke and works everywhere. The Outline preset does exactly this. For a true stroke, -webkit-text-stroke is the dedicated property, but it renders inside the glyph edge rather than outside it, so the two do not look identical.
Does text-shadow hurt readability or accessibility?
It can. Heavy blur or a low-contrast shadow reduces the effective contrast of the letterforms, and glow effects on small body text are hard to read for many people. Keep shadows subtle on anything below heading size, make sure the text colour alone still passes contrast against the background, and treat neon effects as display styling for large headings rather than paragraphs.
How many text shadows can I stack?
CSS itself sets no limit — you comma-separate as many as you like — but each layer is another paint operation, so very deep stacks on lots of animated text can cost performance. This generator allows up to eight layers, which covers long-shadow and layered 3D effects with room to spare, and the exported CSS is the same comma-separated list you would write by hand.
Is anything I type sent to a server?
No. The headline you type, the colors you pick and the CSS you copy are all produced in your browser — nothing is uploaded, there is no account, and the page keeps working offline once it has loaded.
Shadows on cards and boxes? The box shadow generator → Want the headline itself gradient-filled? Gradient text →