CSS Text Shadow Generator

How to use this text-shadow generator

1. Set the offset — drag the horizontal and vertical sliders to move the shadow. A small downward offset (e.g. 2 × 2 px) reads as a natural drop shadow.
2. Soften it — increase blur for a diffuse glow, or set it to 0 for a crisp offset duplicate of the letters.
3. Choose the colour — click the swatch and lower the opacity so the shadow blends over the background instead of looking like solid black.
4. Stack layers — click + Add layer to add more shadows. Neon glows, 3D lettering, long shadows and outlines are all just two or more layers; the active layer is the one the sliders edit.
5. Edit the preview — change the preview text, size, weight, text colour and background to see the effect in context.
6. Copy the CSS — click Copy and paste the text-shadow rule straight into your stylesheet.

text-shadow syntax reference

Unlike box-shadow, text-shadow has no spread value and no inset keyword.

Common text-shadow patterns

• Captions over images — a soft dark shadow like 0 1px 3px rgba(0,0,0,.6) keeps white text readable over a busy photo.
• Neon sign — several zero-offset shadows of one bright colour with growing blur, on a dark background.
• 3D / extruded lettering — a stack of hard 1px shadows stepping down-right in progressively darker shades.
• Long shadow — many hard shadows offset 1px further each, fading to transparent, for the flat-design long-shadow look.
• Outlined text — four hard 1px shadows, one into each diagonal, paint a 1px stroke around every glyph.
• Letterpress / engraved — a 1px light or dark shadow that matches the surface makes text look pressed into it.

The standards story behind text-shadow

text-shadow has one of the stranger histories in CSS. It was first defined in the original CSS Level 2 Recommendation in 1998, but when the working group revised the specification into CSS 2.1, the property was dropped entirely (it was gone from the working drafts around 2004) because almost no browser implemented it consistently. For several years it lived only on paper.

The feature was kept alive almost single-handedly by Apple’s Safari, which supported text-shadow from 2003 (Safari 1.1) — for a while the only browser that did. Those early versions could render only a single shadow per element; support for multiple comma-separated shadows arrived in Safari 4. The other engines followed once the property was re-introduced as part of the modern CSS Text Decoration Module (Level 3): Opera added it in 9.5, Firefox in 3.1/3.5, and Chrome from version 2. By 2015 every major browser supported it, and today it is a “Baseline, widely available” feature you can use with no prefixes and no fallbacks.

One subtle change came with the rewrite. The Text Decoration module notes that the painting order it defines is the opposite of the 1998 CSS2 order: in modern CSS the first shadow in a comma-separated list is painted on top. That is the rule this generator follows when you stack layers — the topmost layer in the list sits in front.

text-shadow vs box-shadow vs filter: drop-shadow()

Three CSS features can cast a shadow, and they are not interchangeable. text-shadow shadows the glyphs and any text decoration of an element. box-shadow shadows the rectangular border box. The drop-shadow() filter function shadows the element’s actual alpha-channel shape, so it can wrap the outline of letters, an icon, a transparent PNG or an SVG.

Two specification details are worth knowing. First, unlike box-shadow, a text shadow is not clipped to the shape that casts it: the spec says text shadows “are not clipped to the shadowed shape and may show through if the text is partially-transparent.” Second, drop-shadow() treats a whole element (and its children) as a single mask, so one filter can shadow an entire group at once, whereas text-shadow halos every glyph individually. For crisp interface text, text-shadow is usually sharper and cheaper; to shadow a logo image or an irregular shape, reach for filter: drop-shadow().

How the blur radius and length units behave

The third value in a text-shadow is the blur radius. It is a CSS <length>, so it can be written in any absolute or relative unit — px is by far the most common, but em and rem scale the blur with the font size, which is useful when a shadow should look the same at every heading level. Percentages are not allowed, and the blur radius cannot be negative (a negative value makes the whole declaration invalid). If you leave the blur out, it defaults to 0, giving a hard-edged duplicate of the text.

A larger blur radius spreads the shadow’s edge over more pixels and fades it, much like a Gaussian blur in an image editor: the further a pixel sits from the original glyph, the more the shadow’s colour is diluted toward transparent. That is why a big, soft glow looks fainter than a tight one of the same colour — the same ink is smeared across a wider area. The offset and the blur are independent, so you can have a sharp shadow far from the text (large offset, zero blur) or a soft halo sitting directly behind it (zero offset, large blur), which is the basis of the neon effect.

Because the colour is optional and may be written before or after the offsets, all of these are valid: 2px 2px 4px black, black 2px 2px 4px, and 5px 5px #558abb (no blur). When you need a colour you can see through, use an rgba() value or an 8-digit hex such as #00000059 so the background shows through the shadow rather than being hidden behind a solid block of colour.

The arithmetic behind stacked-shadow effects

Every “fancy” text effect is just two or more plain shadows added together. Knowing the pattern lets you build one by hand or fine-tune a preset:

• Outline / stroke. Place four hard (blur 0) shadows of the same colour, one pixel into each diagonal: -1px -1px 0, 1px -1px 0, -1px 1px 0 and 1px 1px 0. Together they ring every glyph with a 1px border. For a 2px outline, repeat the set at ±2px and often add the four straight directions for a smoother ring.
• 3D / extruded. Step a series of hard shadows diagonally, one pixel further each time and fading from light to dark: 1px 1px 0, 2px 2px 0, 3px 3px 0, and so on. The unbroken staircase of duplicates reads as solid depth.
• Long shadow. The flat-design “long shadow” is the same idea pushed to a dozen or more steps, each offset one pixel further and each a little more transparent, so the trail fades into the background.
• Neon glow. Stack several zero-offset shadows of one bright hue with increasing blur — for example blur 6, 14 and 28. The tight inner copies keep the letters legible while the wide outer copies bloom into a halo. It reads best as light text on a dark background.
• Letterpress / engraved. A single 1px shadow that matches the lighting — a faint white shadow just below the text on a light surface, or a dark one just above it — fakes the impression of letters pressed into the page.

Order matters because the first shadow paints on top: in a 3D or long-shadow stack you list the nearest, lightest copy first so the darker, farther copies sit behind it.

Legibility, contrast and accessibility

A shadow changes how text looks, but accessibility rules still judge the text fill against the background behind it. WCAG’s contrast requirement (success criterion 1.4.3) asks for a ratio of at least 4.5:1 for normal body text and 3:1 for large text (about 24px, or 18.66px bold). A text-shadow does not count toward that ratio, so you cannot rescue pale grey text on white by adding a shadow — the underlying colours must already pass.

What a shadow can do is keep text readable over a busy or unpredictable background, such as a hero photo. A soft dark shadow like 0 1px 3px rgba(0,0,0,.6) gives white captions a consistent dark edge so they stay legible wherever the image happens to be light. Used that way the shadow is a legibility aid, not a decoration. Keep it restrained on small body copy, though: a strong or blurry shadow thickens and muddies letterforms and makes paragraphs harder, not easier, to read.

Two more habits worth keeping: never encode meaning in a shadow alone (a glow that marks the active tab excludes anyone who cannot perceive it), and if you animate a glow, respect the prefers-reduced-motion media query so people who are sensitive to motion can opt out of a pulsing effect.

Performance and paint cost

For ordinary headings, logos and captions, text-shadow is cheap: the browser paints the text once more per layer, offset and blurred, and is done. There is no layout or reflow cost, and a static shadow has no measurable impact on a page’s Core Web Vitals.

Cost only appears at the extremes. A blur is expensive roughly in proportion to the area it covers, so a single very large glow (say 80–100px) does far more work than a tight 4px shadow, and stacking many layers multiplies that work — a long-shadow effect built from twenty hard copies repaints the text twenty times. None of that matters for a frozen headline, but it does matter if you animate the blur or colour of a large, multi-layer glow across many elements at once, which forces the browser to re-rasterise the text on every frame and can drop the frame rate on low-end devices.

Practical guidance: prefer a small number of layers, keep blur radii modest unless the effect truly needs more, and if you must animate a glow, animate opacity on a single pre-rendered shadow rather than the blur radius, and limit it to a handful of elements. For a soft shadow around an image or an irregular shape, filter: drop-shadow() can be GPU-accelerated and often performs better than emulating it with stacked text shadows.

Common mistakes (and the fixes)

• Forgetting the colour. If you omit the colour, the spec leaves it up to the browser (it commonly falls back to the element’s own text colour), so the result can differ between browsers. State the colour explicitly for predictable output.
• Using solid black for everything. A real shadow lets the background show through. A flat #000 often looks like a hard photocopy of the letters, whereas an rgba(0,0,0,.35) blends far more naturally over any surface.
• Over-blurring small text. A large blur on 14px body copy smears the letters and hurts readability. Reserve big, soft glows for large headings and keep body-text shadows tight and subtle.
• Expecting a spread or inset. Those belong to box-shadow. text-shadow has neither, so an outline has to be faked with four offset shadows, and there is no inset or inner-glow keyword to reach for.
• Listing layers in the wrong order. Because the first shadow paints on top, a 3D or neon stack written back-to-front will bury its own bright inner layer. List the nearest, sharpest copy first.
• Animating the blur radius. Smoothly animating a large glow’s blur is a paint-heavy operation; cross-fade the opacity of a pre-built shadow instead for a smoother, cheaper result.

Frequently asked questions