CSS Box Shadow Generator

The CSS Box Shadow Generator is a visual editor for the CSS box-shadow property. You adjust offset, blur radius, spread radius, color, and opacity with sliders and see the result render live on a preview element, then copy the exact CSS. Instead of guessing pixel values and reloading the page, you shape the shadow directly and read the code it produces.

Open this CSS box shadow generator and it starts on the Card preset, two layers that copy as box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;. The Opacity slider is baked into the hex color, so 10% becomes the 1a at the end. Click the Inner preset and the declaration changes to box-shadow: inset 0px 2px 4px 0px #00000033;, the pressed-button look. Add layer appends a shadow at 0px 4px 6px 0px #00000033, listed last and painted beneath the others.

The box-shadow property is deceptively deep. A single declaration can stack several shadows, each with its own offsets, blur, spread, color, and an optional inset keyword that paints the shadow inside the element rather than outside. Real interface shadows almost always use two or more layers to look natural, which is tedious to hand-write. This tool manages the layers for you and outputs a spec-valid declaration in the correct comma-separated order.

Everything happens in your browser. Pick a preset, tune the layers, switch the preview between light and dark backgrounds, and copy either the standard property or a block that also includes the -webkit- prefix. No account, no uploads, and it keeps working offline once the page has loaded.

Shadows are painted outside the box and take up no space, so they never push neighbours around and will be clipped by any ancestor with overflow hidden. Spread is the least understood value: it grows or shrinks the shadow shape before blurring, so a positive spread with zero blur gives a solid offset outline, which is how border effects are faked without affecting layout. Inset moves the shadow inside the element, useful for pressed states and inner glows. Layering several shadows with increasing offset and blur is how convincing depth is built, since a single large blur reads as fog rather than as a shadow. Each layer costs rendering time, and shadows that repaint during scroll or animation are a common source of jank on lower-powered devices.