5.10 · Type

3D Layered Shadow.

Stack many small offset shadows to give type physical depth. Variants for retro 3D, long shadow, neon glow, and embossed engraving.

What it is

By stacking many text-shadow values with progressively larger offsets, CSS can render text as if extruded into 3D — like a physical object with a beveled side. The trick is purely additive: 10–15 stacked one-pixel shadows of the same color creates the depth, then a final blurred shadow adds the cast shadow. Used by retro brands, gaming sites, ice-cream/snack labels, and any product that wants a tactile, sticker-like feel.

How it works

For retro 3D: stack 6–10 shadows offset by 1px each in the same direction with the same darker color — that's the extruded side. Optionally swap to black for the last few layers to suggest a deeper shadow. Add a final large blurred shadow for cast shadow on the surface. For long-shadow: same technique but 12+ layers. For neon glow: zero-offset shadows with progressively larger blur radii and a glowing accent color. For embossed: one inset-feeling shadow (dark, negative offset) + one highlight (white, positive offset).

Stacked offsets1px, 2px, 3px… each shadow at the same color = extruded depth
Final blurLast shadow uses blur radius for the cast shadow on the surface
Long shadowSame idea, more layers, often diagonal at 45deg
Neon glow0-offset, growing blur radius, accent color repeated 3-5 times

Live demo

Live

SMALL
BATCH.

★ Vol. 04 · drops 30.05.26
Long Shadow
Aurora
Neon Glow
Aurora
Embossed
Aurora

Copy this prompt

Prompt · 5.10 3D Layered Text Shadow
Build a hero with chunky 3D-extruded headline type. Background warm cream #f8e5b3. Headline: font-size clamp(72,12vw,160px), font-weight 800, letter-spacing -0.05em, line-height 0.95, color red #E63946. Apply text-shadow with a STACK of progressively-offset shadows in the darker red #c1303d for layers 1-6 (1 1, 2 2, 3 3, 4 4, 5 5, 6 6 — all 0 blur), then darker still #1A1814 for layers 7-10, finally an 11px-offset 30px-blurred rgba(0,0,0,0.35) for the cast shadow. The cumulative effect: text looks physically extruded 10px diagonally with a soft shadow on the surface. For the italic em-word inside the headline, use a darker base color with grey extrusion. Show 3 variant cards below: (1) "Long Shadow" — same technique with 14+ layers in amber #E8B339; (2) "Neon Glow" — on dark background, white text with 0-offset growing-blur shadows in cyan (4px → 50px) creating a tube-light effect; (3) "Embossed" — single 1px shadow with negative offset in dark + single 1px shadow with positive offset in white = engraved-into-surface look.

Example sites to study