Long shadow

A flat solid shadow that stretches far from an object at one fixed angle, with little or no blur.

very long flat shadowdiagonal solid shadowshadow stretching off the iconflat design shadowinfinite cast shadowretro poster shadowthat blocky shadow going down and rightlong shaddow

See it

Live demo coming soon

What it is

A long shadow is a flat, solid projection that extends far from text or an icon at one fixed angle. Unlike a realistic cast shadow, it usually has no blur, little or no fade, and the same color from the object to the far edge.

Reach for it in flat illustrations, badges, icons, and bold display type that needs a strong sense of direction. In CSS, many small text-shadow or box-shadow offsets can build the extrusion; vector tools can construct one clean polygon from the silhouette.

Gotcha: repeated CSS shadows get heavy when the distance is large, and the hard diagonal can collide with nearby content. Keep the angle consistent across the composition and clip or mask the far edge on purpose.

Ask AI for it

Create a long shadow for this icon using stacked 1px offset steps at a 45-degree down-right angle for 80px. Use one flat dark color, no blur, and no perspective taper. Clip the far end cleanly inside the card and use the same angle for every shadow.

You might have meant

drop shadowflat designneobrutalism