CSS Text Shadow Generator

Free toolNo sign-up

Surface:

Codefronts

Layers1
FontDisplay
Size96px
Weight700

About this generator

Stack any number of text-shadow layers to build effects most generators can’t reach — neon (4-layer glass-tube glow), retro (3-color chromatic offset), 3D (multiple stacked offsets fading to a soft drop), fire (cool-to-hot vertical gradient via blurred layers), outline (4 directional shadows simulating a stroke). 13 curated presets cover the convergent recipes.

Per-layer controls — every shadow has its own x / y / blur / color, with up / down reorder buttons. Edit the text, font (sans / display / mono / serif), size (32-200px), weight (100-900), and color. 5 background surfaces let you verify the shadow on the real backdrop it will ship on.

Permalink: every adjustment encodes into the URL. No login, no watermark, no paywall. Free and MIT-licensed.

Why use text-shadow?

✨

Hierarchy without bigger type

A subtle drop-shadow lifts headlines off busy backgrounds, photos, or gradients without resorting to a heavier weight or larger font-size — the cheapest way to fix readability problems.

🌈

Neon, outline, retro — in plain CSS

Stack multiple shadows comma-separated to build neon glows, hand-drawn outlines, 80s retro stripes, or layered 3D depth. No images, no SVG, just one CSS property.

🎯

Better legibility on photos

A thin dark text-shadow turns hero captions and image overlays from "barely readable" to "always readable" — works at every size and adapts to any background colour.

🪶

Lightweight & animatable

Unlike background images or stroke layers, text-shadow is a single CSS value — animatable, themeable, and fully controllable from a CSS variable. Cheap to render, easy to maintain.

▶

How to use this generator

Pick a preset

Soft, glow, neon, retro, hardLong, emboss, outline, 3d, fire, pastel, letterpress — each preset is a starting layer stack you can refine with the sliders below.

Edit a layer

Click any layer in the list to make it active. Drag the X / Y / Blur sliders, or paste any CSS colour into the field — hex, rgb, hsl, even named colours all work.

Stack more layers

+ add layer to append a new shadow. Reorder with ↑ / ↓ — later layers draw on top of earlier ones, which is exactly how neon glows and 3D effects build up depth.

Tune text & background

Change the sample text, font size, weight, colour, and background. Effects that read perfectly on dark mode often need tweaks on light backgrounds — preview both before shipping.

⇄

text-shadow syntax reference

Value	Effect
`0 2px 4px rgba(0,0,0,0.25)`	`Soft drop`
`0 0 20px #7c6cff`	`Coloured glow`
`1px 1px 0 #000`	`Hard offset`
`-1px -1px 0 #fff, 1px 1px 0 #000`	`Emboss / letterpress`
`0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff`	`Faux outline (4-direction)`
`0 0 4px #fff, 0 0 12px #7c6cff, 0 0 24px #5b48d6`	`Neon (stacked blur)`
`1px 1px 0 #ccc, 2px 2px 0 #999, 3px 3px 0 #666`	`Layered 3D depth`

Each layer is x-offset y-offset blur color. Comma-separate to stack — there is no spread radius (unlike box-shadow).

text-shadow patterns

Drop

/* Subtle drop — readable on any background */
h1 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

Neon

/* Neon glow — three layers building from sharp to soft */
.neon {
  color: #fff;
  text-shadow:
    0 0 4px  #fff,
    0 0 12px #7c6cff,
    0 0 24px #7c6cff,
    0 0 48px #5b48d6;
}

3D · outline

/* Hard 3D depth — six 1px-offset layers */
.three-d {
  color: #fff;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000,
    4px 4px 0 #000,
    5px 5px 0 #000,
    6px 6px 0 #000;
}

/* Faux outline — works on any colour */
.outlined {
  color: #fff;
  text-shadow:
   -1px  0 0 #000,
    1px  0 0 #000,
    0 -1px 0 #000,
    0  1px 0 #000;
}

✦

Pro tips

Stack order matters

Shadows draw bottom-up — the FIRST value in the list is rendered on TOP. Put your sharpest, brightest layer first; broader blurred glows last so they sit underneath.

Use semi-transparent colours

rgba() blends naturally with backgrounds. Solid colours can clash on light backgrounds — start with rgba(0,0,0,0.25) for a 25% drop and adjust from there.

Outlines are faked, not native

CSS has no real text outline (the proper -webkit-text-stroke property only paints a single uniform stroke). Multi-direction shadows are the cross-browser way to get a clean 1–2px outline.

Mind performance on long copy

text-shadow is GPU-friendly, but rendering 4+ blurred layers across paragraphs of text can cost. Reserve heavy stacks for headings; use one cheap layer (or none) on body copy.

Frequently asked questions

Why stack multiple text-shadow layers?

One shadow gives you a flat drop shadow. Stacking layers unlocks the effects that make typography pop — neon glow (4 layers, increasing blur), 3D depth (multiple offset hard shadows), outline / stroke (4 shadows at ±1px in each direction), fire (cool-to-hot color gradient via multiple blurred layers), retro chromatic offset (3 stacked colored shadows). The neon preset alone uses 4 layers to produce the convincing 'lit glass tube' effect. The hard-long preset stacks 6 black 1px shadows for a chunky long-shadow projection.

How does text-shadow differ from box-shadow?

text-shadow draws shadows around each character's GLYPH (the actual letter shape), not the element's bounding box. box-shadow draws around the rectangular element. For headings, text-shadow follows the letter outlines correctly — drop shadows fall behind the letters themselves, not behind the line of text. text-shadow doesn't support spread or inset (no spread radius, no inset keyword); box-shadow does. Use text-shadow ON the text element, box-shadow ON containers.

Can I animate text-shadow?

Yes. Animating from one shadow chain to another works when both chains have the same number of layers in the same order. Common patterns: pulse a neon glow (animate the blur radius of the last layer), flicker effect (animate opacity of multiple layers), color cycle (animate the colors via @property + transition). The exported CSS works directly with transition: text-shadow 0.3s ease for the simple cases.

Why does my text-shadow look pixelated at small font sizes?

text-shadow renders to the same surface as the text glyphs and is subject to the browser's text antialiasing. At small font sizes (<16px), shadows with blur < 2px or sub-pixel offsets can look choppy. For small body-text use cases, prefer the 'soft' preset (1-3px offset, 2-4px blur) which renders cleanly down to ~14px. For decorative headings ≥48px, all 13 presets render smoothly.

Are text-shadows GPU-accelerated?

Less consistently than box-shadow. text-shadow runs through the text-rendering pipeline; in Chrome / Safari, simple shadows are GPU-accelerated, but complex multi-layer shadows (5+) can drop to CPU compositing. For animation, prefer 2-3 layer shadows over 8+ layer ones — visually almost identical, much smoother on lower-end devices. The exported CSS includes the full chain; you can trim it down if perf matters.

Is this free for commercial use?

Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.

See it used in real designs

Browse hand-coded collections that put this tool to work.

Snippets25 examples

25 CSS Blockquotes