A long shadow extends diagonally far beyond the element itself, creating a stylised depth effect closely associated with flat design and the Microsoft metro UI era of the mid-2010s.
Loading Shadow Effect Builder…
Automatically generates multi-layer long shadow CSS
Controls for shadow angle, length, colour, and opacity
Live preview of the extended diagonal shadow effect
Outputs a complete comma-separated box-shadow declaration
Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Shadow Effect Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
A long shadow extends at a diagonal angle to a distance much greater than the element's own size. On a 60px icon, a long shadow might extend 120 pixels diagonally, creating an extended tail that implies the icon is lit from very far away at a low grazing angle. In flat design contexts, the long shadow adds dimensionality without using realistic depth, gradients, or blur, which keeps the overall layout faithful to flat principles while still introducing a sense of directional light. The technique became broadly popular around 2013 and 2014 as a way to add visual interest to flat interface icons and headers without resorting to skeuomorphic gradients or photorealistic drop effects. In skeuomorphic contexts, long shadows reference the dramatic raking shadows of architectural photography and product photography lit at very low angles.
The CSS implementation uses many box-shadow layers stacked in a comma-separated list, each offset by one pixel more than the previous one along the chosen angle. A 60px long shadow at 45 degrees requires 60 shadow layers: box-shadow: 1px 1px rgba(0,0,0,0.1), 2px 2px rgba(0,0,0,0.1), 3px 3px rgba(0,0,0,0.1), and so on up to 60px 60px rgba(0,0,0,0.1). Generating this declaration by hand would be tedious and prone to typos that are very hard to spot in a long string. Build tools, CSS preprocessors with @for loops, and generators like FixTools automate the layer calculation. The visible output looks like a single smooth shadow but is actually many one-pixel-step offsets rendered atop each other in the compositing layer.
Performance is a legitimate concern with long shadows because every layer is a separate paint operation. A 100px long shadow requires 100 box-shadow layers. Applied to a static decorative element that never animates and lives above the fold, this renders once on the first paint and has effectively no ongoing performance cost during the rest of the session. Applied to an animated element or an element that repaints frequently during scroll, those same 100 shadow layers will visibly degrade frame rate on mid-range and lower-end mobile devices, especially when several long-shadow elements are visible at once. Limit long shadows to static decorative elements such as hero headlines, illustrative icons in fixed sections, and static card decorations. Never apply a long shadow to an element that scrolls into view with parallax, animates continuously, or changes state on every interaction.
Designing with long shadows means committing to a specific stylistic era and audience reading. The look is strongly tied to a particular moment in interface design history and is read by many viewers as a deliberate retro nod rather than a contemporary default. This makes long shadows a useful tool for brand work, illustration-led marketing pages, and editorial features where the period reference is part of the message. It is a poor fit for general utility interfaces where the shadow risks looking dated rather than designed. When you use long shadows today, pair them with other contemporary type and layout choices so the page reads as intentionally retro-inspired rather than as a site that simply has not been updated since 2014. The combination of long shadows with modern variable fonts and generous whitespace is one of the cleanest ways to honour the technique without feeling stuck in its original period.
Select the shadow angle (typically 45 degrees), set the shadow length in pixels, and choose a colour. The tool generates all required shadow layers automatically. Copy the declaration and apply it to your flat-design element.
Step-by-step guide to css long shadow generator:
Set the shadow angle and length
Select the diagonal angle, with 45 degrees being the most standard and recognisable choice for flat design long shadows, and set the length in pixels to control how far the shadow extends beyond the element. Longer values produce more dramatic effects but should generally stay within roughly twice the element height to avoid the shadow overpowering the actual element. Use the live preview to find a length that feels balanced against the rest of the layout.
Choose shadow colour and opacity
Select a dark colour with low opacity in the rgba alpha channel for a subtle flat-design shadow that integrates with the page background, or a more saturated and opaque colour for a dramatic editorial or poster effect. Coloured long shadows work especially well when matched to a darker variant of the element fill colour, which creates a more cohesive treatment than a generic dark grey applied uniformly across every element on the page.
Preview and adjust length
Check the live preview area to ensure the shadow length feels proportional to the element it sits beneath. Reduce the length if the shadow visually dominates the composition or causes visual collisions with neighbouring elements in the grid. Pay particular attention to how the shadow tip aligns with surrounding type, columns, and section dividers, since the long tail can introduce unwanted diagonals into an otherwise grid-aligned page layout.
Copy the generated CSS declaration
Copy the full comma-separated box-shadow or text-shadow declaration generated by the tool. It will contain anywhere from 30 to 200 individual layers depending on your chosen length, and you should paste the entire string as-is into your stylesheet without trying to manually edit individual layers. If you need multiple long shadows in different colours across the project, save each generated declaration into a CSS custom property for easy reuse.
Common situations where this approach makes a real difference:
Hero section heading with extended diagonal shadow
A design agency builds a hero section for a portfolio site and wants the main display heading to feel weighty and intentional from the first paint. The heading uses a 120-pixel long shadow at 45 degrees in a semi-transparent dark navy that fades along its length. The shadow extends diagonally across the hero background, adding dramatic visual depth to the otherwise flat layout. Because the heading is fully static, the cost of the 120-layer text-shadow declaration is paid only once at page render and has no impact on subsequent interaction or scroll performance.
Flat design icon set with consistent long shadows
A developer builds a flat design analytics dashboard where each top-level metric icon needs a long shadow to add visual interest and reinforce the implied light source across the page. Using a single CSS custom property that stores the pre-generated 80-layer declaration, every icon references the same variable through var() in its filter chain. The consistent shadow angle, length, and colour across all icons creates a unified light-source effect that ties the dashboard together visually and avoids the dissonance that mismatched per-icon shadows would otherwise produce in a metrics overview.
Marketing landing page feature icon with long shadow
A SaaS marketing site places large feature icons in alternating left-right sections down the homepage, with each section explaining one product capability. Each icon has a 100-pixel long shadow extending diagonally behind it, partially overlapping the section background and the alternating colour blocks. The shadow creates a sense of depth within the otherwise flat layout and adds a strong visual anchor to each icon without requiring the team to commission custom illustrations or background photography. The treatment scales gracefully from mobile up to ultra-wide desktop breakpoints.
Retro app store screenshot graphic
A mobile developer creates an app store screenshot promotional graphic where the app name is displayed in large geometric type with a long shadow styled deliberately after 1970s travel poster typography. The shadow extends at a shallow 30-degree angle in a dark complementary colour that picks up the secondary brand palette. The FixTools generator outputs the text-shadow layer list automatically for the desired length and fade curve, and the developer drops the generated declaration straight into the screenshot template stylesheet without further hand-tuning of individual layer values.
Use this when you want a flat design or skeuomorphic extended shadow effect on icons, headings, or card components and need the full multi-layer CSS generated automatically.
Get better results with these expert suggestions:
Use will-change on long-shadow elements that are static at load
Adding will-change: box-shadow to a static long-shadow element pre-promotes it to its own GPU compositing layer, which means the expensive multi-layer shadow is rasterised once at first paint and then never recomputed during scrolling or animation elsewhere on the page. Only apply this on elements that are genuinely static and visible at page load, because overusing will-change causes real memory pressure on low-end devices and can paradoxically hurt performance. A good rule of thumb is one will-change hint per major hero section, not one per icon throughout the page layout.
Combine long shadow with text-shadow for typography
The text-shadow property supports comma-separated layers in exactly the same syntax as box-shadow. A long shadow on a heading applied via text-shadow produces a noticeably cleaner result than box-shadow because text-shadow follows the actual glyph outlines rather than the rectangular text bounding box. The visual difference is most obvious on headings with descenders, italics, or display weights where the inner counters of letters need to read clearly. Generate the same multi-layer offset list and apply it as text-shadow for any long-shadow treatment that sits on heading copy, display type, or large numerals in dashboard widgets.
Limit long shadow length to twice the element size
A long shadow longer than roughly twice the element height starts to look disproportionately elongated and draws attention to itself as a CSS trick rather than a design choice that supports the rest of the composition. For a 60px icon, shadows up to 80 or 100 pixels look intentional and balanced against the icon mass. At 200 pixels, the shadow dominates the composition and overpowers the element that is supposed to be the focal point. Stay inside the two-times-element-height rule unless you are deliberately going for an exaggerated poster look, in which case commit fully to that scale across every long-shadowed element on the page.
Test on light and dark backgrounds before committing
Long shadows at low opacity look radically different on white versus dark backgrounds, far more than designers usually expect when first applying them. A shadow that reads clearly at rgba(0,0,0,0.1) on a white background is essentially invisible on a dark theme page, because there is too little tonal contrast between the dark background and the low-opacity dark shadow. Use higher opacity, a lighter shadow colour, or even a saturated coloured shadow when applying long shadows on dark backgrounds. Always preview against the real page background colour rather than the default white preview, which flatters dark shadows unrealistically.
Use CSS variables or a preprocessor mixin for long shadows
If you need long shadows in multiple places, define a Sass mixin or a CSS custom property that accepts the length and angle parameters and outputs the full layer list. This prevents duplicating hundreds of comma-separated values across your stylesheet.
Keep long shadows on static elements only
Never apply a long shadow to an element that animates, transitions, or is frequently repainted. The multi-layer compositing cost is acceptable for a static hero heading but prohibitive for a continuously animated icon or a card that animates on hover.
Fade the shadow with decreasing opacity per step
A flat-opacity long shadow looks like a solid wedge. Gradually decreasing the rgba opacity from 0.15 at step 1 to 0.01 at the final step produces a shadow that fades naturally toward the tip, looking more like a real extended shadow.
More use-case guides for the same tool:
Open the full Shadow Effect Builder — free, no account needed, works on any device.
Open Shadow Effect Builder →Free · No account needed · Works on any device