How do you fake 3D depth with just text-shadow?

The effect stacks many text-shadow layers, each offset by one more pixel along the chosen angle than the last (using cos/sin of the angle to get consistent x/y steps), so the layers build up into a solid-looking wall of color behind the front-facing text — like a staircase of shadows.

How many layers (depth) should I use?

Somewhere between 15 and 30 layers looks solid for most font sizes without visible gaps; fewer layers (5-10) reads as a simpler drop-shadow-with-thickness look, while pushing past 40-50 mostly adds rendering cost without a visible difference since the layers already fully overlap.

Does a large depth value hurt performance?

Each layer is one more shadow the browser has to paint, so a very high depth on a lot of animated or frequently-repainted text can be noticeably slower — for static headlines it's fine, but keep depth modest if the text itself is animating.

Can I change the direction of the extrusion?

Yes — the angle control changes which way the 'depth' falls (straight down, down-right, etc.), the same way you'd rotate a 3D object's light and shadow; 45 degrees down-right is the classic retro-game look.

Is this generated locally?

Yes — the shadow stack is computed with client-side JavaScript and nothing is uploaded or stored.

3D EXTRUDED TEXT GENERATOR

Stack offset text-shadow layers into a solid extruded block and copy the CSS.

In short

Give flat text a solid, extruded look with a stack of offset text-shadow layers — adjust depth, angle, and color, then copy the HTML and CSS. Computed entirely in your browser, no images or 3D libraries.

Extrusion

Depth: 15 layers

Angle: 45°

Extrusion color

Front face color

Presets

HTML

<span class="extruded-text">3D TEXT</span>

CSS

.extruded-text {
  color: #ffffff;
  text-shadow: 1px 1px 0 #c0392b, 1px 1px 0 #c0392b, 2px 2px 0 #c0392b, 3px 3px 0 #c0392b, 4px 4px 0 #c0392b, 4px 4px 0 #c0392b, 5px 5px 0 #c0392b, 6px 6px 0 #c0392b, 6px 6px 0 #c0392b, 7px 7px 0 #c0392b, 8px 8px 0 #c0392b, 8px 8px 0 #c0392b, 9px 9px 0 #c0392b, 10px 10px 0 #c0392b, 11px 11px 0 #c0392b;
}

How to build 3D extruded text

1
Type your headline text.
2
Pick a preset or set the extrusion angle and depth (how many layers thick it looks).
3
Choose the extrusion color and the front face color.
4
Increase depth for a chunkier block look, or keep it shallow for a subtle lift.
5
Copy the generated text-shadow CSS and HTML.

Questions

How do you fake 3D depth with just text-shadow?: The effect stacks many text-shadow layers, each offset by one more pixel along the chosen angle than the last (using cos/sin of the angle to get consistent x/y steps), so the layers build up into a solid-looking wall of color behind the front-facing text — like a staircase of shadows.
How many layers (depth) should I use?: Somewhere between 15 and 30 layers looks solid for most font sizes without visible gaps; fewer layers (5-10) reads as a simpler drop-shadow-with-thickness look, while pushing past 40-50 mostly adds rendering cost without a visible difference since the layers already fully overlap.
Does a large depth value hurt performance?: Each layer is one more shadow the browser has to paint, so a very high depth on a lot of animated or frequently-repainted text can be noticeably slower — for static headlines it's fine, but keep depth modest if the text itself is animating.
Can I change the direction of the extrusion?: Yes — the angle control changes which way the 'depth' falls (straight down, down-right, etc.), the same way you'd rotate a 3D object's light and shadow; 45 degrees down-right is the classic retro-game look.
Is this generated locally?: Yes — the shadow stack is computed with client-side JavaScript and nothing is uploaded or stored.

Related tools

All Color & CSS Tools →

Updated September 11, 2026