CSS Text-Shadow & 3D Type Generator

A shadow behind a heading can add depth, lift it off a photo or make it glow like a sign. CSS expresses all of it in one property, text-shadow, but the effects come from stacking several layers, and the exact numbers decide whether the result looks polished or like a 1998 web page. This generator lets you edit layers one by one, preview them on a coloured background and copy a single declaration.

How a layer works

A layer is four values: horizontal offset, vertical offset, blur radius and colour. A positive x moves the shadow to the right, a positive y moves it down, and a blur of zero gives a hard copy of the glyph. Layers are separated by commas, and the first layer is painted on top of the rest. Unlike box-shadow, there is no spread and no inset; if you need a thicker or inner effect, build it from several offset layers instead.

A worked example

Press Sample to load the Neon preset on a deep indigo background with white letters. The page writes four layers: 0px 0px 4px #ffffff, 0px 0px 10px #ffffff, 0px 0px 20px #ff2d95 and 0px 0px 40px #ff2d95. None of them is offset, so the light spreads equally in every direction. The two white layers sit close to the letters and make them look as if they are the hot tube, and the two pink layers with a wider blur make the halo. Change the pink layers to cyan and the sign changes colour with no other edit.

Presets and what they teach

Soft is a single light shadow, 0px 2px 4px rgba(0, 0, 0, 0.3), which lifts text just enough to read over a busy image. Letterpress is a single hard layer, one pixel down with no blur, in translucent white, which makes dark text look pressed into the page. Outline uses hard shadows at four offsets to fake a stroke around the letters. Neon is the glow above. Each is a starting point; add a layer with the plus button and adjust its numbers, or paste any CSS colour such as rgba(0, 0, 0, 0.4) or hsl(330 100% 59%) into the colour field.

The 3D extrude mode

Switch the Style control to 3D extrude. The tool then writes a series of hard shadows, each one step further across and down than the last, so the letters appear to have thickness. With a depth of 3, a one pixel step both ways and a base colour of #6366f1, the output is 1px 1px 0px #5f62e7, 2px 2px 0px #5b5ede, 3px 3px 0px #575ad4. Each layer is a little darker than the previous one, which the darken-per-layer slider controls, so the side of the letter shades toward the back. Depth goes up to 40 layers.

Edge cases

Every layer is another paint of the text, so long paragraphs with many layers slow scrolling; keep deep effects for headings. Large blur radii are clipped by the element’s box in some cases, so give a glowing heading some padding. Text with a transparent fill, as used for gradient text, still draws its shadow, which can show through the letters. For accessibility check the contrast of the text itself, not of the glow, because assistive reading depends on the letters.

Limits

The page does not generate -webkit-text-stroke, SVG filters or animation keyframes, although you can transition between two shadow lists with the same number of layers. The preview uses one font size and a single line of text. Everything runs in your browser.

Related tools

• Box Shadow Generator shadows boxes rather than letters.
• Neumorphism CSS Generator uses paired light and dark shadows.
• Type Scale Calculator sizes the heading before you style it.
• Contrast Checker tests that the text remains readable.