롱 섀도

Long shadow

45도 방향으로 길게 뻗어나가는 그림자를 아이콘·글자에 다는 플랫 디자인 트렌드. 2013년 전후 유행했습니다.

다른 이름: Flat design long shadow45-degree shadow

···

html

<div class="stage"><span class="ico" id="ico">A</span></div>

css

.stage{display:grid;place-items:center}
.ico{font-size:clamp(70px,20vmin,120px);font-weight:800;color:#5b5bf7;
  font-family:Arial,Helvetica,sans-serif;line-height:1}

const el = document.getElementById('ico');
let len = 10, dir = 1;
function build(n) {
  const parts = [];
  for (let i = 1; i <= n; i++) parts.push(i + 'px ' + i + 'px 0 #2e2b99');
  return parts.join(',');
}
function loop() {
  len += dir * 0.35;
  if (len > 70) dir = -1;
  if (len < 10) dir = 1;
  el.style.textShadow = build(Math.round(len));
  requestAnimationFrame(loop);
}
loop();

box-shadow 나 text-shadow 를 같은 방향(예: 1px 1px)으로 수십 개 겹쳐 쌓으면 끊김 없이 길게 뻗은 단색 그림자처럼 보입니다. CSS 는 그라데이션 그림자를 지원하지 않아 반복으로 흉내 냅니다.

실무에서는 매 프레임 그림자 개수를 재계산하는 대신, ::before 가상 요소를 skewX/scaleX 로 늘여 그림자 모양을 만드는 방식이 더 가볍습니다.

언제 쓰나

플랫 아이콘 세트, 2013년대 무드의 의도적인 레트로 리바이벌에 씁니다. 최신 UI 트렌드에는 잘 안 쓰입니다.