Give headlines serious depth. Aim the shadow, stretch it, shape the finish and copy clean CSS—all with a live preview.
Build the layered look visually, then take only the CSS you need.
Drag the direction dial or use the precise degree slider to send the shadow anywhere.
Change the length and softness while the generator calculates a smooth stack of shadows.
Get plain CSS that works without images, libraries, accounts or extra JavaScript.
Enter a short headline, choose a bold font and set the shadow direction. The angle controls where the shadow travels, while Shadow length controls its depth. A 45-degree angle creates the familiar down-right look; try 135 degrees to send the effect down and left.
Select a finish that suits the design. Solid makes a sharp block of color, Fade out gradually becomes transparent, Two-tone blends between two colors, and Rainbow creates a playful spectrum. When the result feels right, use Copy CSS.
A long shadow extends beyond the letters. Give the heading enough padding and avoid placing it too close to the edge of a clipped container.
A long shadow is a flat-design effect made from many closely spaced shadow layers. Together, the layers look like one continuous extrusion behind the text. It works especially well on hero headings, poster typography, badges, thumbnails and bold callouts. This long shadow generator online creates the repeated text-shadow values for you, so you do not need to calculate dozens of offsets by hand.
Use a heavy display face and keep the phrase short. Make sure the front text has strong contrast against both the background and the first shadow layer. Sharp shadows feel graphic and retro; a little softness makes the edge more atmospheric. For responsive layouts, reduce the generated font size and shadow length at smaller breakpoints.
Stack many text-shadow values, increasing the horizontal and vertical offsets a little on every layer. The tiny steps join together visually as one long shadow.
Yes. Each successive layer can use slightly less opacity. Choose Fade out above and the copied CSS will include the calculated alpha values.
No. The final effect is pure CSS. JavaScript only powers the controls and live preview on this page.
It works on normal web text and inherits the selected or loaded font. Bold, compact letterforms usually make the effect easiest to read.
Yes. It is free to use online, needs no sign-up and processes everything in your browser.
Keep exploring typography with these free online CSS generators.