When to use it
The long shadow is a flat-design mannerism from around 2013: a hard, 45 degree streak trailing off an icon or a badge, like the shadow of a building at sunset. It is decorative and it is loud, so it belongs on a logo mark, an app icon, a hero illustration or a poster-style heading, and nowhere near a form. Used once on a page it is a signature; used on every card it is a template. This example is here because the technique is a good lesson in what stacked hard shadows can do, and because the generator supports the twelve layers it needs.
How it is built
There is no CSS property for extruding a shape, so the long shadow is built from the box's own silhouette, copied and moved. Each layer has zero blur, so its edge is hard, and steps one pixel further down and to the right than the last. Because the copies overlap, they merge into a solid diagonal streak. Fading the opacity along the tail makes it taper:
box-shadow:
1px 1px rgba(27, 35, 64, 0.18),
2px 2px rgba(27, 35, 64, 0.17),
3px 3px rgba(27, 35, 64, 0.16),
4px 4px rgba(27, 35, 64, 0.15),
/* ... one pixel further each step ... */
12px 12px rgba(27, 35, 64, 0.07);Twelve layers, the generator's maximum, give a short tail that suits an interface element. The classic streak that runs to the edge of an icon needs forty or more, which is where a preprocessor loop comes in.
Generating the layers with Sass
Nobody should type forty shadows. A Sass @for loop builds the list from a length and a colour, and the fade is arithmetic:
@function long-shadow($length, $colour, $start: 0.18) {
$list: ();
@for $i from 1 through $length {
$alpha: $start * (1 - $i / $length);
$list: append($list, #{$i}px #{$i}px rgba($colour, $alpha), comma);
}
@return $list;
}
.badge {
box-shadow: long-shadow(40, #1b2340);
}The same idea works as a small JavaScript function if the project has no preprocessor, or as a one-off from the generator: apply the Long shadow preset, adjust the colour, and copy the twelve layers from the CSS tab.
Notes and limits
Hard shadows are the cheap kind to paint, since there is no blur, so the layer count is not a performance worry on its own. The limits are aesthetic and structural. The streak must be clipped by something, an icon tile or a badge with overflow: hidden, or it runs across the page; on a bare element the tail looks like a rendering error. It only reads as light from the top left, so it does not sit with soft, layered shadows lit the same way on the same page. And it belongs to a specific period of design; if the rest of the interface is 2026, one long shadow reads as a quotation, which is fine if that is the intention.
The code in four formats
Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.
box-shadow:
1px 1px 0 rgba(27, 35, 64, 0.18),
2px 2px 0 rgba(27, 35, 64, 0.17),
3px 3px 0 rgba(27, 35, 64, 0.16),
4px 4px 0 rgba(27, 35, 64, 0.15),
5px 5px 0 rgba(27, 35, 64, 0.14),
6px 6px 0 rgba(27, 35, 64, 0.13),
7px 7px 0 rgba(27, 35, 64, 0.12),
8px 8px 0 rgba(27, 35, 64, 0.11),
9px 9px 0 rgba(27, 35, 64, 0.1),
10px 10px 0 rgba(27, 35, 64, 0.09),
11px 11px 0 rgba(27, 35, 64, 0.08),
12px 12px 0 rgba(27, 35, 64, 0.07);
border-radius: 8px;$shadow:
1px 1px 0 rgba(27, 35, 64, 0.18),
2px 2px 0 rgba(27, 35, 64, 0.17),
3px 3px 0 rgba(27, 35, 64, 0.16),
4px 4px 0 rgba(27, 35, 64, 0.15),
5px 5px 0 rgba(27, 35, 64, 0.14),
6px 6px 0 rgba(27, 35, 64, 0.13),
7px 7px 0 rgba(27, 35, 64, 0.12),
8px 8px 0 rgba(27, 35, 64, 0.11),
9px 9px 0 rgba(27, 35, 64, 0.1),
10px 10px 0 rgba(27, 35, 64, 0.09),
11px 11px 0 rgba(27, 35, 64, 0.08),
12px 12px 0 rgba(27, 35, 64, 0.07);
.element {
box-shadow: $shadow;
border-radius: 8px;
}<div class="shadow-[1px_1px_0_rgba(27,35,64,0.18),_2px_2px_0_rgba(27,35,64,0.17),_3px_3px_0_rgba(27,35,64,0.16),_4px_4px_0_rgba(27,35,64,0.15),_5px_5px_0_rgba(27,35,64,0.14),_6px_6px_0_rgba(27,35,64,0.13),_7px_7px_0_rgba(27,35,64,0.12),_8px_8px_0_rgba(27,35,64,0.11),_9px_9px_0_rgba(27,35,64,0.1),_10px_10px_0_rgba(27,35,64,0.09),_11px_11px_0_rgba(27,35,64,0.08),_12px_12px_0_rgba(27,35,64,0.07)] rounded-[8px]"></div>
/* Or name it once in your theme (Tailwind v4): */
@theme {
--shadow-custom: 1px 1px 0 rgba(27, 35, 64, 0.18), 2px 2px 0 rgba(27, 35, 64, 0.17), 3px 3px 0 rgba(27, 35, 64, 0.16), 4px 4px 0 rgba(27, 35, 64, 0.15), 5px 5px 0 rgba(27, 35, 64, 0.14), 6px 6px 0 rgba(27, 35, 64, 0.13), 7px 7px 0 rgba(27, 35, 64, 0.12), 8px 8px 0 rgba(27, 35, 64, 0.11), 9px 9px 0 rgba(27, 35, 64, 0.1), 10px 10px 0 rgba(27, 35, 64, 0.09), 11px 11px 0 rgba(27, 35, 64, 0.08), 12px 12px 0 rgba(27, 35, 64, 0.07);
}
/* then use class="shadow-custom" */.element
box-shadow 1px 1px 0 rgba(27, 35, 64, 0.18), 2px 2px 0 rgba(27, 35, 64, 0.17), 3px 3px 0 rgba(27, 35, 64, 0.16), 4px 4px 0 rgba(27, 35, 64, 0.15), 5px 5px 0 rgba(27, 35, 64, 0.14), 6px 6px 0 rgba(27, 35, 64, 0.13), 7px 7px 0 rgba(27, 35, 64, 0.12), 8px 8px 0 rgba(27, 35, 64, 0.11), 9px 9px 0 rgba(27, 35, 64, 0.1), 10px 10px 0 rgba(27, 35, 64, 0.09), 11px 11px 0 rgba(27, 35, 64, 0.08), 12px 12px 0 rgba(27, 35, 64, 0.07)
border-radius 8pxFrequently asked questions
How do you make a long shadow in CSS?
Stack hard-edged shadows (blur 0) that step one pixel diagonally each time: 1px 1px, 2px 2px, 3px 3px and so on, fading the opacity as they go. Twelve steps give a short tail; forty give the classic flat-design streak.
Why does the long shadow use so many layers?
Because CSS has no way to extrude a shape. Each layer is the box's silhouette moved one more pixel; together they fill the diagonal. Blur zero keeps the edges crisp so the layers merge into one solid streak.
Is a long shadow expensive to render?
Less than you would think. Hard shadows with no blur are cheap to paint, so forty unblurred layers cost less than one 60px blur. Just do not animate them.
Can I make a long shadow on text or an icon?
Use text-shadow with the same stepping for text, and filter: drop-shadow() for an icon or SVG. box-shadow follows the element's box, so on text it would shadow the whole line box.