text-shadow is one of the oldest effects in CSS and still one of the most misused. A single soft shadow can lift white text off a busy photo, while five stacked glows can turn a heading into a neon sign. This guide covers the syntax, how layering works, recipes for outlines, glows, 3D and long shadows, the readability traps, and how the CSS Text Shadow Generator turns the trial and error into sliders you can watch.
Small effect, real jobs.
Most text never needs a shadow. The cases that do are specific. White headlines over hero photos lose contrast wherever the photo is bright, and a faint dark shadow keeps the letters readable without a solid overlay. Display type on a landing page can use a hard offset shadow to feel printed. Game titles, event posters and retro themes lean on glows and stacked 3D shadows because the effect is the point.
Because the shadow follows each glyph, it works on live text. That matters: the heading stays selectable, translatable and readable by screen readers, and it scales with the font size instead of being a fixed image.
Offsets, blur, color.
A shadow is written as X offset, Y offset, an optional blur radius and a color: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);. Positive X moves the shadow right and positive Y moves it down. A blur of 0 gives a crisp copy of the letters, and larger values soften it into a haze.
Two things are missing compared with box-shadow. There is no spread value, so you cannot grow the shadow without blurring it, and there is no inset keyword. When you need a thicker shape, you stack more shadows instead. Layers are separated by commas and the first one in the list is painted on top.
Most effects are several shadows.
Almost every interesting text shadow is a stack. An outline is four hard shadows offset by one pixel in each diagonal: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000. A glow is several shadows with no offset and growing blur, such as 0 0 4px #fff, 0 0 10px #f0abfc, 0 0 20px #d946ef, 0 0 40px #a21caf, on a dark background.
3D lettering is a staircase: hard shadows that each step one pixel down and to the right in a darker shade, finished with one soft shadow underneath to ground it. A long shadow is the same staircase stretched to 30 or 40 steps, usually fading out, which is the flat design look from app icons.
In the CSS Text Shadow Generator, the Outline, Neon, 3D and Long shadow presets load each of these, and the layer list shows exactly what they contain. Hide a layer with the eye button to see what it adds, or move it up and down to change which one sits on top.
Let the tool write the repetitive part.
Writing forty comma-separated shadows by hand is tedious and easy to get wrong. The generator's Long shadow switch does it for you: set a length in pixels, an angle, a color and a starting opacity, and it adds one hard shadow per pixel along that angle. With Fade on, each step is a little more transparent than the last, so the shadow melts into the background instead of ending in a hard edge.
At 45 degrees, a 30 pixel long shadow in black at 30 percent opacity on white text over an indigo background gives the classic flat icon look. Your manual layers still apply on top, so you can add a soft drop shadow under the long one. Keep long shadows for large headings; on smaller text the steps crowd the letter shapes.
The usual suspects.
Each of these shows up constantly, and each has a simple fix.
Text, boxes or images.
Use the CSS Text Shadow Generator when the shadow belongs to letters. Type your real headline into the preview, set the font size, weight and colors to match the design, and copy the result as CSS, a rule with the text color, an arbitrary Tailwind class or an SCSS variable. The share link keeps the whole setup in the URL, which makes review with a designer easy.
When the shadow belongs to a card, a button or an image frame, switch to the CSS Box Shadow Generator, which has spread and inset. For shadows that follow the shape of a transparent PNG or an SVG icon, the drop-shadow() function in the CSS Filter Generator is the right fit.
Try it now
The tool is one click away. No sign up, no upload, no payment.
Open CSS Text Shadow Generator