Developer Tools New Tool

Free Online CSS Box Shadow Generator with Stacked Layers

Build a box-shadow the way real interfaces use it, with more than one layer. Each layer has its own offset, blur, spread, colour with alpha and inset switch, the commas are written for you, and the preview shows the stack exactly as the browser will paint it on a real element.

Free Forever Nothing Uploaded Stacked layers Runs in your browser

Free Online CSS Box Shadow Generator with Stacked Layers

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Box Shadow Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

CSS

Layers

Preview Corner radius 12px Dark surface

2 layers 0px largest blur

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Box Shadow

A few steps, and nothing is uploaded.

Start with two layers A tight, nearly opaque layer for the contact edge and a wide, faint one for the ambient spread. That pairing is what makes a shadow read as depth rather than as a border.

Set each layer Offset X and Y, blur, spread, colour and alpha. Turn on inset on a layer to draw it inside the box instead of outside.

Check it on both surfaces Switch the preview to a dark surface. A shadow tuned on white often disappears on dark, which is worth knowing before you ship it.

Copy the rule The output is one box-shadow declaration with your layers joined by commas, in the order they are painted.

What to Know About Box Shadows

Including what spread really does and what a big blur costs.

Spread grows the shadow in every direction at once. A positive spread pushes the shadow outward on all four sides before the blur is applied, and a negative one pulls it in. That is why a small negative spread with a large blur gives a tidy halo, while a large positive spread quickly turns into a solid slab.

A large blur is paid for on every repaint. The browser has to blur the shadow whenever the element moves, so a 60px blur on a sticky header or a card in a long scrolling list can cost real frames on a slow device. If something is animated or scrolled, keep the blur modest and lean on alpha instead.

Later layers are painted underneath earlier ones. In a comma-separated list the first shadow sits on top, so the tight contact layer belongs first and the wide ambient one last. Reversing them does not throw an error, it just quietly gives you a muddier result.

This page does not follow the shape of your content. The preview is a plain rounded box, because box-shadow itself only ever follows the border box and its radius. If you need a shadow that traces a transparent PNG or an irregular clip, that is filter: drop-shadow(), which is a different tool and a different property.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Stacked layers As many comma-separated shadows as the design needs.

Every value exposed Offset, blur, spread, colour and alpha on each layer.

Light and dark surface One switch, so you can see whether it survives on dark.

Inset per layer Draw a layer inside the box for a pressed or inner edge.

Paste-ready rule A single box-shadow declaration, commas and units included.

Runs in your browser No upload, no account, and it works with the network off.

About the CSS Box Shadow Generator

A convincing shadow is rarely one shadow. Light in a real room gives an object a tight dark contact edge where it meets the surface and a much wider, fainter spread around it, and CSS lets you say exactly that by listing more than one shadow in the same declaration. Most flat-looking interfaces are flat because they use a single mid-blur shadow and nothing else.

This page is built around that list. Each layer gets its own offset, blur, spread, colour and alpha, and you can add or remove layers as you go. The preview is a real element with the real rule applied, sitting on a surface you can switch between light and dark, so the comparison that usually gets skipped is one click away.

The numbers are kept honest. Units are written into the output, the commas go in the right places, and the order of the layers in the rule is the order they will be painted, with the first one on top. Nothing is uploaded and nothing is stored; the page is a calculator for a declaration you could have written yourself, with the fiddly parts handled.

Frequently Asked Questions

Spread, inset, layering and scroll performance.

Blur softens the edge of the shadow, fading it out over the distance you give. Spread changes the size of the shadow before any blurring, growing it outward on all four sides for a positive value and shrinking it for a negative one. A common trick is a large blur with a small negative spread, which keeps a soft shadow from creeping out too far sideways.

Because a black shadow at low alpha on a dark surface has almost nothing to darken. On dark interfaces shadows carry much less of the depth, so you usually need a higher alpha, a larger offset, or a faint light inset layer along the top edge instead. The dark-surface switch here exists so you find that out before your users do.

It draws the shadow inside the border box rather than outside it, so the element looks recessed or has an inner edge. Inset layers are how pressed buttons, inset form fields and subtle inner rims are made, and you can mix inset and outset layers freely in the same declaration.

It can. Blurring is done at paint time, so a wide blur on an element that scrolls, moves or animates makes the browser redo that work on every frame. On a long list of cards or a sticky element, a smaller blur with a slightly higher alpha usually looks the same and costs far less.

Not with box-shadow. It always follows the rectangle of the border box and its corner radius, whatever is drawn inside. For a shadow that traces the visible pixels of a transparent PNG or an SVG shape, you need filter: drop-shadow() instead, which reads the alpha channel of what it is applied to.