CSS Text Shadow Generator
Set offset, blur, color, and opacity, stack multiple shadow layers for outline, glow, 3D, and retro effects, preview live on sample text, and copy the exact text-shadow CSS.
- Free, no account
- No watermark
- No usage limit
About the CSS Text Shadow Generator
Most free text-shadow generators preview every effect on one white box. That's fine for a plain drop shadow. It breaks the moment you try a glow, a neon glow is close to invisible on white, so you crank the blur, pick a bright color, and see almost nothing, then you're tuning an effect you can't actually see. This one matches the stage to the effect instead. Tap the Glow preset and the preview flips to a dark background with light text, so the neon reads the instant you land on it. There's a Dark background toggle too, for the times you want to flip the stage yourself.
Everything else is what a good generator should be. One slider each for horizontal offset, vertical offset, and blur. A color picker with its own opacity slider. Your own words in the preview instead of placeholder filler, so you judge the effect on the headline it actually has to carry. And the exact text-shadow line printed underneath, ready to copy. Six presets (Soft, Outline, Glow, 3D, Retro, Letterpress) drop you onto a working effect in one click, and each sets the text color and background along with the shadow, so you start from something that already looks right. The whole thing runs in your browser, nothing is uploaded, there's no sign-up, and it works offline once the page has loaded.
How to use
- Type your real headline into the Sample text box. A shadow that looks great on "Hello" can smear on a longer line, so test the words you'll actually ship.
- Set the text color, and flip Dark background on if you're building a glow or neon. Those only read on a dark stage, so match the preview to where the text will actually live.
- Drag the horizontal and vertical offset sliders to place the shadow. For a natural drop shadow, leave horizontal near zero and give vertical a few pixels of positive, which reads as light coming from above.
- Set the blur. Zero is a hard, crisp edge for outlines. Turn it up and the shadow softens into the haze a glow is made of.
- Pick the shadow color, then pull the opacity down. A black shadow at 35 to 50 percent almost always looks better than solid black.
- Add more layers for outlines, glows, and 3D depth, or just tap a preset to jump straight to one. Then hit Copy CSS and paste the whole line in.
The presets do the setup, not just the shadow
A preset in most tools pastes a pile of shadow values and leaves you to work out why it looks wrong, where a preset here sets up the whole scene. Hit Glow and you get the shadow stack, white text, and a dark stage together, because a glow on a white page shows you nothing. Hit Letterpress and the text color shifts to something the pressed-in look actually works on. You land straight on a working effect.
The two effects people usually come here for are the glow and the outline, and CSS makes both a pain to write by hand.
A glow is zero offset, a big blur, a bright color, and several of those stacked. One blurry shadow just looks fuzzy. What sells it as a glow is a tight bright core with wider colored halos building outward:
text-shadow: 0 0 7px #fff, 0 0 14px #00e5ff, 0 0 28px #00e5ff;
The Glow preset drops that in and darkens the stage so you can see it. Retro does a hard-edged offset version of the same idea for the neon-sign look.
The outline is the other one. CSS still has no real outline property for text, so the trick is four hard shadows, one nudged toward each corner, same color, zero blur, together they draw a solid ring around every glyph. It works in every browser, and the Outline preset sets all four layers up. Push the offsets to 2px for a thicker ring. There's a real stroke property too, -webkit-text-stroke, but four shadows give you color and softness control it doesn't.
Why the opacity slider matters
The most common way a shadow goes wrong is solid, fully opaque black. It sits behind the letters like a sticker, because nothing in the real world casts a 100 percent opaque shadow, there's always ambient light bleeding in and lifting it toward the background color.
So drop the opacity. A black shadow at 40 percent looks far more natural:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
This is where the dedicated opacity slider does its job, and it's why the tool always writes an rgba() value rather than a bare hex. Leave the color off a text-shadow entirely and it inherits your text color, which almost always looks muddy. Writing explicit rgba means you control the color and the transparency together, and never get a surprise inherited color.
Opacity matters twice as much once you stack. Low-opacity layers blend into a smooth glow. Pile on full-opacity ones and they go chunky. Nearly every convincing multi-layer effect leans on partial transparency somewhere.
Stacking layers, front to back
One shadow is plenty for a subtle drop shadow. But everything eye-catching, the neon, a crisp outline, chunky 3D lettering, is a stack of shadows in one declaration, separated by commas. They paint front to back, the first in the list on top, each later one behind it.
That order and those commas are the tedious part to hand-write. An eight-shadow 3D effect means eight offsets stepped right, eight colors darkening in sequence, every comma in place, and one wrong offset throws it off. The tool keeps the order right and joins the layers, so you tune with sliders on a live preview instead of editing a number, saving, and alt-tabbing back to check.
Frequently asked questions
What's the difference between text-shadow and box-shadow?
text-shadow follows the shape of each letter, the curve of an o, the stem of a t. box-shadow follows the rectangular box around an element. box-shadow also has two things text shadows don't, a spread value that grows or shrinks the shadow, and an inset keyword that draws it inside the box, and text-shadow has neither of those. So reach for box-shadow on a card or a button, and text-shadow when it's the actual words you want shadowed.
Is there a limit to how many shadow layers I can stack?
No limit that matters, glows and 3D effects routinely use six or eight. The real ceiling is performance. Each layer is a separate paint pass and a wide blur is expensive per pixel, so a stack of big-blur glows across a long paragraph can get sluggish on phones. A few shadows on a heading costs the browser almost nothing.
Why is my text-shadow invisible?
Usually one of three things. The shadow color is too close to the text or the background (a dark shadow on a dark background just vanishes). The offsets and blur are all near zero, so the shadow hides directly behind the letters. Or the opacity is very low. Bump one offset up a few pixels and raise the opacity. And if you left the color off, the shadow took your text color, which often looks like nothing at all.
Can a text-shadow help my text pass accessibility contrast?
No, and this one trips people up. WCAG contrast is measured on your actual text color against the background, and a shadow doesn't count toward it. A subtle dark shadow does help a reader by giving letters a clean edge over a busy photo, but it can't rescue pale gray text on white. Fix the text color so it passes on its own, then let the shadow handle the uneven-background cases.
Do text shadows work in every browser?
Yes. text-shadow has worked everywhere anyone targets for years, Chrome, Firefox, Safari, Edge, no vendor prefixes needed. A browser old enough not to understand it just ignores the property and shows plain readable text, so it degrades safely. Multiple shadows, blur, and every color format share that same support.
How do I animate a text-shadow without it going janky?
Animating the shadow value repaints the blur every frame, which looks fine on one heading and stutters across a long list. For a hover glow, animate the opacity of a duplicate glow layer instead of the shadow, or keep the animated blur small. And going from no shadow to a shadow, start from a transparent, zero-blur shadow rather than the keyword none, which won't interpolate.
What order do the text-shadow values go in?
Horizontal offset, then vertical offset, then blur, then color: offset-x offset-y blur color. The two offsets are required, blur and color are both optional. Skip the blur and it defaults to 0, a hard edge. Skip the color and the shadow inherits your text color, which is rarely what you want. Also worth knowing, a text-shadow shadows the text decorations too, so an underline on the same element gets the shadow as well.