Long shadow

롱 섀도

A shadow stretching at a 45-degree angle far behind an icon or letter — a flat-design trend that peaked around 2013.

Also known as: 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();

Stacking dozens of box-shadow/text-shadow layers in the same direction (say 1px 1px each) reads as one continuous, long solid-colour shadow — CSS has no gradient shadow, so repetition fakes it.

In practice, a lighter approach skews and scales a ::before pseudo-element along the shadow's axis instead of recomputing dozens of shadow layers every frame.

When to use

Use for flat icon sets or a deliberate 2013-era retro revival. It doesn’t fit current UI trends outside that context.