पाठ छाया जनरेटर

Anatomy of a Single Shadow Layer

The CSS text-shadow property is defined in the W3C CSS Text Decoration Module Level 3. The grammar accepts a comma-separated list, where each layer has two required length values, an optional blur radius, and an optional colour:

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

• offset-x: horizontal offset. Positive moves the shadow right, negative moves it left.
• offset-y: vertical offset. Positive moves the shadow down, negative moves it up.
• blur-radius: Gaussian-style blur. 0 is a hard-edged shadow; larger values diffuse it. Negative values are invalid.
• color: any CSS colour, including rgba() / hsla() for partial transparency. Defaults to currentcolor if omitted.

Length units are full CSS lengths, px, em, rem, vw, etc. Percentages are not allowed (this matches box-shadow). The property is inherited, so a text-shadow set on a parent applies to descendant text unless overridden.

The Stacking Rule Almost Everyone Gets Wrong

When you stack multiple shadows, they paint front-to-back: the first shadow in the comma list paints on top, the last paints furthest behind. The W3C spec is exact: "The shadow effects are applied front-to-back: the first shadow is on top." Most authors expect the cascade-like "last wins" behaviour they're used to from other CSS properties, and get tripped up the moment they need a 3D extrusion or a layered glow.

A useful rule: when stacking layered shadows, the spec also guarantees that "the shadows may overlay each other, but they never overlay the text itself." The text glyphs always paint on top, you cannot accidentally cover the letters with their own shadows.

Recipes for the Effects in the Preset List

Soft drop shadow: small offset, small blur, semi-transparent black. Reads professional, doesn't shout. Works on body text without harming legibility.

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

Neon glow: zero offsets, multiple layers of the same hue with increasing blur radius to mimic light diffusion. Works on dark backgrounds. The first one or two layers can be white to simulate the bright tube core inside the coloured halo.

text-shadow:
  0 0 5px  #fff,
  0 0 10px #fff,
  0 0 20px #ff00de,
  0 0 30px #ff00de,
  0 0 40px #ff00de;

Retro 3D / extruded: stacked single-pixel offsets with zero blur, gradually darker colours. Each layer is one pixel further out than the previous, fakes a chiselled side. Remember the front-to-back rule: the FIRST layer in the list is the one closest to the viewer (the front of the extrusion).

text-shadow:
  1px 1px 0 #aaa,
  2px 2px 0 #999,
  3px 3px 0 #888,
  4px 4px 0 #777,
  5px 5px 0 #666;

Outline / stroke: four single-pixel shadows in each diagonal direction with zero blur. Cheap way to fake an outline before -webkit-text-stroke existed; modern browsers also accept -webkit-text-stroke: 1px black, which renders cleaner because it follows the actual glyph outline.

text-shadow:
  -1px -1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;

Hero overlay shadow: what makes white text legible on top of a busy photo or video. A medium-radius shadow at low opacity restores contrast without producing a visible drop-shadow look.

text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);

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

All three properties produce shadow-like effects, but they target different things:

Use text-shadow when the shadow should follow letter shapes. Use box-shadow when the shadow should follow the element's edge. Use filter: drop-shadow() when the element has a non-rectangular alpha mask (an irregular SVG, a transparent PNG with curved edges), it's the only option that respects the actual rendered shape, including transparent regions.

Performance Notes

Each shadow layer is its own paint operation. A two- or three-layer shadow is essentially free on modern browsers, but long-shadow effects with 30+ layers can hit performance, particularly during animation. Two practical rules:

• Don't animate text-shadow on a long block of text. Hover-glow on a single button is fine; pulsing the shadow on a 200-word paragraph isn't.
• Watch out for prefers-reduced-motion. Pulsing or flashing shadows can trigger photosensitivity issues. Wrap any animated shadow in a media-query gate so users who've asked the OS to reduce motion get a static version.

@media (prefers-reduced-motion: no-preference) {
  .neon { animation: pulse 2s ease-in-out infinite; }
}

Accessibility and Contrast

A heavy decorative shadow under body text can drop contrast below WCAG 2.1's 4.5:1 minimum for normal text or 3:1 for large or bold UI components, especially when the shadow's tint approaches the text colour. The shadow is decoration; the text underneath still needs to meet contrast against the actual background colour. Hero overlays solve the opposite problem (white text becoming illegible on a photographic background) and are usually accessibility wins, but always measure the contrast of the worst-case patch the text will sit over.

Browser Support

Universal in every evergreen browser since the early 2010s (caniuse global support is around 97%+ in 2026). Internet Explorer 9 and below did not support text-shadow: if you still need to support them, the conventional fallback is to leave the property out entirely (older IE just renders the text without a shadow, which usually degrades acceptably).

Common Mistakes

1. Reversing the layer order on multi-shadow effects. The first layer in the comma list paints on top. For an extruded 3D effect, the FRONT face of the extrusion is the FIRST shadow.
2. Forgetting that text-shadow has no spread or inset. Those are box-shadow features. text-shadow has only x, y, blur, colour.
3. Using black shadows on dark text. No visible effect, the shadow gets absorbed by the same dark colour as the text.
4. Overdoing it on body copy. Decorative shadows on long paragraphs hurt legibility and trigger reading fatigue. Keep the heavy shadows for headings and hero text.
5. Animating a long-shadow effect. 30 stacked layers transitioning per frame can drop the page below 60 fps. Animate opacity or transform on the parent instead.
6. Subpixel-rendering surprises with single-pixel outlines. The four-corner outline trick can look uneven at non-integer zoom levels. -webkit-text-stroke: 1px is cleaner where supported.
7. Forgetting prefers-reduced-motion on pulsing shadows. Some users have asked their OS to reduce animation; respect it.

More Frequently Asked Questions

Why does my 3D extrusion look wrong?

Almost always layer order. Multiple text-shadow layers paint front-to-back: the first one is closest to the viewer. For a clean extrusion, list the layers from smallest offset (front) to largest offset (back), with progressively darker colours.

Can I animate text-shadow?

Yes, it's a list of shadows and CSS interpolates per layer. Hover-glow effects are common. Avoid animating long-shadow effects with many layers, and respect prefers-reduced-motion for users who've asked the OS to minimise animation.

How do I make a clean text outline?

Two options. The cross-browser fallback is four single-pixel shadows, one in each diagonal direction (-1px -1px, 1px -1px, -1px 1px, 1px 1px). The cleaner modern option is -webkit-text-stroke: 1px black, which works in Chromium and Safari and follows the actual glyph outline rather than approximating it with four shadows.

Why doesn't the shadow show up over my text?

By spec design. The W3C states explicitly that text-shadows "may thus overlay each other, but they never overlay the text itself." The text glyphs always paint on top of every shadow they cast, you cannot intentionally make the shadow cover the letters.

Will the generated CSS work in production?

Yes. The output is plain standard CSS, no preprocessor or framework dependencies. It works in every modern browser and degrades cleanly in older ones (the text renders without a shadow). Drop the rule into your stylesheet and apply the class to your headlines or buttons.