Design Atlas
한국어
✦ Visual effects

Layered text-shadow

레이어드 텍스트 섀도우

Stack several same-colour, zero-blur text-shadows at 1px-increasing offsets and the letters read as if they have physical thickness — an extruded, 3D look.

Also known as: Extruded textStacked text-shadow3D text via shadow
···
html
<div class="wrap"><h1 id="t">LAYERS</h1><div class="label" id="l">layers: 1</div></div>
css
.wrap{position:relative;display:grid;place-items:center;gap:14px}
h1{margin:0;color:#fff;font:800 12vmin/1 sans-serif;letter-spacing:.01em}
.label{font:600 12px/1.4 monospace;color:#9a9aa6}
js
function buildShadow(n){
  const layers = [];
  for (let i = 1; i <= n; i++) layers.push(i + 'px ' + i + 'px 0 #5b5bf7');
  layers.push((n + 4) + 'px ' + (n + 6) + 'px 10px rgba(0,0,0,.35)');
  return layers.join(',');
}
const h1 = document.getElementById('t');
const l = document.getElementById('l');
let n = 1, dir = 1;
function apply(){
  h1.style.textShadow = buildShadow(n);
  l.textContent = 'layers: ' + n;
  n += dir;
  if (n >= 14 || n <= 1) dir *= -1;
}
apply();
setInterval(apply, 220);

text-shadow accepts a comma-separated list, each entry with its own x/y offset, blur, and colour. Set blur to zero and stack same-colour shadows at growing 1px, 2px, 3px… offsets, and each layer is a full copy of the glyphs nudged one step further — the pile reads as the letters' thickness seen from the side.

Add one more shadow with blur on top of that stack and it drops a soft, ordinary shadow under the extruded block, finishing the look of a solid object sitting on a surface.

Because it repaints the entire glyph set once per layer, more layers (20+) cost more paint on large headings, and animating on top of that visibly slows down. In production, fix the layer count instead of animating it, and if performance matters, swap it for the much cheaper combo of one -webkit-text-stroke plus one filter: drop-shadow() for a similar extruded feel.

When to use

For one large, sparse piece of text like a hero title. Fix the layer count, and don't use it on repeated text like body copy or lists.