CSS Box Shadow Generator

How to use

1. Select a layer and enter offsets, blur, spread, opacity and hex color.
2. Add, duplicate or reorder layers. The UI order exactly matches the declaration.
3. Inspect the scrollable preview, then copy CSS or download shadow.css. Reset and Clear offer Undo.

Worked example

The default is 0px 8px 24px 0px rgba(0, 0, 0, 0.2). It moves a soft black shadow eight pixels down with twenty percent opacity. For stacking, 0px 0px 0px 4px red, 0px 0px 0px 8px blue puts the red shadow above the blue one: the first shadow is on top, as defined in the CSS documentation.

Blur, spread and inset

Horizontal and vertical offsets move the shadow. Blur softens edges and cannot be negative. Spread expands the shape when positive and contracts it when negative. Inset draws inside the box. Lengths are −200 to 200 px, blur 0 to 200 px, opacity 0 to 100 percent; lengths allow one decimal. Zero layers produces box-shadow: none.

Limits and predictable editing

At most six layers. A duplicate gets a new identity. Deleting the selected layer selects the next layer at that position, or the preceding layer if it was last. Incomplete or invalid edits stay visible, while the preview and labelled CSS retain the last valid shadow; copying and downloading are disabled until corrected. Preview size is 80–300 px and radius 0–150 px. Large shadows are inspectable by scrolling, without widening the whole page.

Output is a fixed .shadow class with only its box-shadow declaration, LF line endings and no vendor prefixes. No CSS import, animation or text-shadow support. A box shadow follows the element’s box; transparent image silhouettes may instead need filter: drop-shadow, which this tool does not generate. Refresh clears all in-memory settings.