Craft stunning multi-layer CSS box shadows with live preview. Stack up to 5 layers, pick colours with alpha, and copy production-ready CSS instantly.
This box-shadow generator builds CSS drop shadows visually — stack multiple layers, fine-tune offset, blur, spread and colour with live sliders, and copy production-ready box-shadow CSS in one click.
A good shadow is what makes a flat interface feel layered and tactile, but the CSS syntax — four length values, an optional inset keyword, and a colour, repeated for every layer — is tedious to tune by hand. This tool gives you a real-time preview on a checkerboard backdrop so you can judge a shadow against light and dark surfaces, plus a gallery of presets that mirror common design-system elevations. Because real-world shadows are rarely a single blur, you can stack up to five layers and blend tight contact shadows with soft ambient ones. Reach for it when you need to:
Everything is generated locally in your browser and nothing is uploaded. The output includes a -webkit- prefixed line for maximum compatibility, and you can tweak the preview box's size, radius, and background colour so the shadow is tested against the shape it will actually wrap.
box-shadow value (with -webkit- prefix) for your stylesheet.box-shadow follows the element's rectangular box (and border-radius). filter: drop-shadow() follows the visual silhouette including transparent PNG areas — useful for logos and irregular shapes.
A tight close shadow plus a wide soft shadow mimics how real light scatters, giving a much more believable sense of depth than a single shadow.
Yes — toggle the Inset switch inside any layer. Inset shadows render inside the element's border, useful for pressed-button states and inner glows.
In order they are horizontal offset, vertical offset, blur radius, and spread radius. Offsets move the shadow, blur softens its edge, and spread grows or shrinks the shadow before blurring. A trailing colour value sets its tint and opacity.
Use a low opacity (around 10–20%), a generous blur, and little or no spread, then stack a second tighter layer beneath it. Real objects cast a soft ambient shadow plus a darker contact shadow, so two layers read as far more natural than one.
Set both offsets to 0, pick a bright colour, raise the opacity, and increase blur and spread. Stacking two or three coloured layers of increasing blur produces a convincing neon glow around the element.
Static shadows are cheap. Performance only suffers when you animate large, heavily blurred shadows, because the browser repaints them each frame. For animated elevation, animate transform and opacity or cross-fade a pseudo-element instead of animating the blur directly.