디자인 아틀라스
EN
✦ 시각 효과

레이어드 텍스트 섀도우

Layered text-shadow

같은 색·블러 없는 text-shadow 를 1px씩 늘려가며 여러 겹 쌓으면, 글자가 옆으로 눌린 두께를 가진 것처럼 보이는 압출(extrude) 효과가 됩니다.

다른 이름: 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 는 콤마로 여러 개를 나열할 수 있고, 각각 x·y 오프셋·블러·색을 따로 가집니다. 블러를 0으로 두고 같은 색으로 1px, 2px, 3px… 오프셋을 늘려가며 겹겹이 쌓으면, 매 레이어가 글자 전체를 한 칸씩 밀어낸 복사본이라 쌓인 모습이 옆에서 본 두께처럼 보입니다.

마지막에 블러가 있는 그림자 하나를 더 얹으면 그 압출된 덩어리 아래에 은은한 실제 그림자가 깔려 바닥에 놓인 입체물처럼 마무리됩니다.

레이어 수만큼 글자 전체를 다시 그리는 것과 같아서, 레이어가 많을수록(특히 20장 이상) 큰 제목에서 페인트 비용이 늘고 그 상태에서 애니메이션까지 겹치면 눈에 띄게 느려집니다. 실무에서는 레이어 수를 고정값으로 박아두고, 성능이 중요하면 -webkit-text-stroke 하나 + filter: drop-shadow() 하나로 훨씬 싼 "압출 느낌"으로 대체하는 편이 낫습니다.

언제 쓰나

히어로 타이틀 하나처럼 큼직하고 개수가 적은 텍스트에 씁니다. 레이어 수는 고정하고, 본문·리스트처럼 반복되는 텍스트에는 쓰지 마세요.