CSS Box Shadow Generator

Build and copy a shadow

1. Edit each layer's horizontal and vertical offset, blur, spread, color and opacity. Choose inset when the shadow should appear inside the box.
2. Add, duplicate or move layers to shape the result. Keep 1–8 layers; a field that is incomplete or outside this editor's limits clears the current code until corrected.
3. Inspect the preview in Fit or 100% view, then copy the declaration. Paste it into a CSS rule for the element you want to style.

Understand each layer

Positive horizontal and vertical offsets move a shadow right and down. Blur softens its edge; zero blur leaves a sharp edge. Spread changes its size rather than its softness.

Opacity belongs to each shadow color, not the entire box. A 50 percent shadow stays exactly 50 percent in the code; its color is not converted to a rounded alpha byte.

The first layer is foremost within its painting category. Outset shadows remain behind the box background, while inset shadows remain above that background and below the border. Moving rows cannot cross those categories.

Lengths accept a dot or comma and up to two fractional digits; opacity accepts one. These are bounded editor controls, not a parser for every valid CSS expression. The generated code always uses decimal dots.

Useful shadow experiments

The starting example combines a small soft shadow at 0, 2, 4, 0 pixels and 12.5 percent opacity with a broader 0, 8, 16, -4 pixel shadow at 20 percent. Each row maps to one code entry.

For a crisp outline-like effect, use zero offsets, zero blur and positive spread on an outset layer. It is still a shadow, not an exported border property.

Try an inset layer with zero blur and a positive offset to inspect its sharp inner edge. Change the surface color and use 100% view without altering the shadow declaration.

Know what the preview shows

This editor produces 1–8 sRGB box-shadow layers in CSS pixels. It does not import CSS, generate filter drop-shadows, choose a selector or export a complete stylesheet or image.

The preview's box size, opaque colors and corner radius are context only. Your element's own geometry and background can change how the same declaration looks.

Fit scales the whole preview. Use the scrollable 100% view for closer inspection. Preview space is finite and can clip blur tails; browsers and displays need not paint identical pixels.

A transparent or collapsed shadow can be valid but invisible. If this browser cannot preview the current declaration, the tool says so rather than substituting a different effect; valid code remains available to copy.

Your shadow stays in the page

Shadow editing and code generation run locally without uploading or saving your values. Copy happens only when you choose it. The site's general privacy policy still applies.