CSS & Layout
Box Shadow Generator
Drag the sliders to shape a shadow and watch the live preview react instantly. Stack several layers, fine-tune every offset, blur, spread, colour and inset, then copy production-ready CSS. Everything runs in your browser.
Shadow controls
Drag a slider — the preview and CSS update live. Use the small fields on the right when you need an exact value.
Live preview
updates as you dragCSS output
How it works
Each layer is written as inset (optional) followed by
offset-x offset-y blur spread color, then layers are joined with commas —
standard CSS box-shadow syntax. Longer values are clamped to safe limits so the
output is always valid CSS. Nothing is sent to a server; the optional share link encodes the
layers in the URL fragment, which stays in the browser.
Practical uses
Build single or layered CSS box shadows with a live preview and copyable CSS.
Common ways to use it
- Create a consistent elevation shadow for cards and menus.
- Prototype a focus ring and copy the exact CSS.
- Stack several shadows to soften the transition from an element to its background.
The example preset as a CSS declaration
Input
Five enabled layers: 0 1px 2px, 0 2px 4px, 0 4px 8px, 0 8px 16px and 0 16px 32px, each #000000 at 7% opacity. Output format: declaration.
Output
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 4px 8px 0 rgba(0, 0, 0, 0.07), 0 8px 16px 0 rgba(0, 0, 0, 0.07), 0 16px 32px 0 rgba(0, 0, 0, 0.07);
Verified with the tool's buildCss on its example layers. The value format returns the same shadow without the box-shadow prefix and semicolon; the rule format wraps it in .element { ... } or a selector you supply.
Options that matter
- Offset X and Offset Y — move the shadow from -150 to 150 pixels.
- Blur — edge softness from 0 to 300 pixels.
- Spread — grow or shrink the shadow from -150 to 150 pixels.
- Colour and opacity — a colour picker plus a 0 to 1 alpha slider; opacity below 1 is written as rgba().
- Inset — draws the shadow inside the element and puts the inset keyword first.
- Enabled — hides a layer from the CSS without deleting it.
- Output format — plain declaration, value only, or a selector rule block.
- Up, Down, Duplicate, Remove and Add layer — reorder or extend the stack, up to 8 layers.
Things to keep in mind
- At most 8 layers, and offset and spread are clamped to plus or minus 150 pixels while blur is clamped to 300.
- A disabled layer is left out of the output; if every layer is disabled the value is box-shadow: none;.
- The share link encodes only the layers. Preview surface, backdrop, corner radius and preview size are not included.
- Out-of-range numbers supplied through a share link are clamped back into range when parsed.