This long shadow text generator builds the flat-design long shadow for text or boxes. Choose an angle, a length and a colour, optionally fade the shadow out, and copy ready-to-paste text-shadow or box-shadow code instead of writing dozens of layers by hand.
Runs entirely in your browser — nothing is uploaded. Angle 0 points right, 90 down, 180 left and 270 up.
How Does a Long Shadow Text Generator Build the Effect?
It stacks many hard-edged shadows, each moved one step further in the same direction. With zero blur and a solid colour they merge into one band. At 45 degrees and a length of 40, you get 40 layers running from 1px 1px to 40px 40px, so the shadow reaches 40px right and 40px down.
| Angle | Offset per step (x, y) | Direction |
|---|---|---|
| 0° | 1px, 0 | Right |
| 30° | 1px, 0.58px | Right, slightly down |
| 45° | 1px, 1px | Down-right |
| 90° | 0, 1px | Down |
| 135° | -1px, 1px | Down-left |
How CSS Long Shadow Code Is Worked Out
CSS long shadow code is just a long comma-separated list, because CSS has no single long shadow property. The tool works out each step’s x and y offset from the angle, scales it so the main direction moves exactly 1px per step, and joins the layers into one text-shadow or box-shadow value.
Rule: for step i = 1 to Length, x = i × cos(angle) ÷ k and y = i × sin(angle) ÷ k, where k = the larger of |cos(angle)| and |sin(angle)|, both rounded to 2 decimals. Each layer is “x y 0 colour”. With Fade on, the colour becomes rgba with opacity (Length − i + 1) ÷ Length, rounded to 3 decimals.
- Text shadow / Box shadow: which property the code uses.
- Angle: direction in degrees, 0 right, 45 down-right, 90 down, 135 down-left.
- Length: number of layers, 1 to 500; at 45 degrees each step is 1px right and 1px down.
- Shadow colour, Text or box colour, Background: used in the code and the preview.
- Preview text and Fade: the word shown in the preview (if you leave it blank, it shows Aa) and an optional fade-out.
Example Settings and Output
| Settings (input) | Shadow value (output) |
|---|---|
| Text, 45°, 40 steps, #163f2a | 1px 1px 0 #163f2a, 2px 2px 0 #163f2a … 40px 40px 0 #163f2a (40 layers) |
| Text, 45°, 3 steps, #000000 | 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 0 #000000 |
| Text, 135°, 3 steps, #000000 | -1px 1px 0 #000000, -2px 2px 0 #000000, -3px 3px 0 #000000 |
| Text, 30°, 2 steps, #000000 | 1px 0.58px 0 #000000, 2px 1.15px 0 #000000 |
| Box, 90°, 2 steps, #000000 | box-shadow: 0 1px 0 #000000, 0 2px 0 #000000 |
| Text, 45°, 4 steps, #000000, Fade on | 1px 1px 0 rgba(0,0,0,1), 2px 2px 0 rgba(0,0,0,0.75), 3px 3px 0 rgba(0,0,0,0.5), 4px 4px 0 rgba(0,0,0,0.25) |
Tips for Flat Design Long Shadow Text and Icons
A flat design long shadow works best on bold, chunky type set large, such as 48px and up, on a saturated background. Pick a shadow colour a shade or two darker than the background rather than black, so it reads as depth instead of a smudge.
- Make the length at least the distance from the element to the container edge, or the band stops short. For a flat icon long shadow centred in a 200px tile, 100 steps at 45 degrees is plenty.
- For a long shadow text effect that disappears at the edge, put the text in a container with overflow: hidden.
- Each layer is drawn separately, so hundreds of layers on many elements can make scrolling feel slower on budget phones. Use it for headings and icons, not body text.
- Angles such as 30 degrees produce fractional offsets, which can look slightly jagged on low-resolution screens.
For the full syntax, including how multiple shadows stack, see MDN’s text-shadow reference. Treat the generated code as a draft, then fine-tune by hand.
Common questions about CSS long shadows
What is a long shadow in CSS?
A long shadow is a flat-design effect where an element casts a sharp shadow that stretches far in one direction, often to the edge of its container. CSS builds it by listing many text-shadow or box-shadow layers with no blur, each offset one step further, so they join into one continuous band.How do I make a long shadow text effect?
Stack text-shadow layers with zero blur, each moved 1px further along the same direction. At 45 degrees that means 1px 1px, 2px 2px and so on, so 40 steps gives a shadow 40px long. The generator writes the full list for you.Can I add a long shadow to a flat icon?
Yes. Use Text shadow for icon fonts, since it follows the glyph shape, or Box shadow for square and rounded icon tiles. Put the icon inside a container with overflow: hidden so the band is cropped at the tile edge.Can I download the long shadow code?
Yes. Press Download .css to save a small stylesheet with a .long-shadow class containing the colour and the full shadow list. Link it in your page or paste the rule into your existing stylesheet; the effect is plain CSS that every modern browser supports.What is the difference between text-shadow and box-shadow here?
text-shadow follows the shape of each letter, so it suits headings and icon fonts. box-shadow follows the rectangular outline of the element, including its rounded corners, so it suits buttons, cards and square icons. The offsets are the same for both; only the property name and the colour rule change.Does a long shadow slow down my page?
A few dozen layers on a heading is rarely noticeable. Hundreds of layers on many elements, or on something animated, can add rendering work, especially on older phones. Keep the length close to what is visible and avoid animating the shadow itself.Related Tools
Convert the shadow colour for other tools with the hex to RGB color converter. To check the trigonometry behind an angle, try the triangle calculator or the slope calculator, then return to the CSS long shadow generator to fine-tune the direction.