CSS Box Shadow Generator
Design CSS box-shadows with live preview and copy-ready code.
Quick answer: CSS Box Shadow Generator: design CSS box-shadows with live preview and copy-ready code. Runs entirely in your browser, free, no signup.
Last updated
Good to know
The CSS box-shadow property takes up to four length values in a fixed order — horizontal offset, vertical offset, blur radius, spread radius — followed by a color. The order matters and is easy to misremember: a positive vertical offset pushes the shadow down, and the blur radius softens the edge while the spread radius grows or shrinks the whole shadow before it is blurred. Dragging the sliders here removes the guesswork and shows the result instantly.
For realistic depth, keep shadows subtle: a small offset, a generous blur and a low opacity read as a natural drop shadow, whereas a hard, opaque shadow looks like a 1990s bevel. A widely used technique is to stack several shadows with increasing blur to mimic how light actually diffuses — you can do that by pasting multiple declarations separated by commas, since a single box-shadow accepts a comma-separated list.
Two things to know: adding the inset keyword flips the shadow to the inside of the element, which is handy for pressed-button and inset-field effects, and box-shadow does not affect layout or the element's box size the way border does, so it never nudges neighboring elements. For rounded corners that the shadow will follow, pair this with the border-radius generator, and check any shadowed text stays legible with the contrast checker.
Frequently asked questions
- Is the box-shadow generator free?
- Yes — free, no signup.
- Can I add multiple shadows?
- The generator emits a single shadow; combine the output with commas if you need layered shadows.
- What unit does it use?
- Pixels — the most common unit for box-shadow offsets.
- Does the output support inset?
- Not in this version — set inset on the resulting CSS by hand if you need it.
- Are my settings saved?
- No — the preview and CSS run entirely in your browser.