CSS box-shadow generator
Compose a CSS box-shadow with a live preview, then copy the value.
Runs 100% in your browserHow to use the box-shadow generator
- Drag the sliders. Adjust offsets, blur, spread and color — the preview updates live.
- Pick inset or outer. Toggle the inset checkbox for an inner shadow effect.
- Copy the CSS. Click Copy to grab the box-shadow value and the full rule.
About box-shadow
box-shadow is the workhorse of UI depth — cards, modals, dropdowns, focus rings all
use it. The four numbers are offset-x, offset-y, blur and spread. Negative offsets push the
shadow up or left, positive blur softens the edge, and positive spread grows the shadow before
blurring. The inset keyword inverts the shadow so it appears inside the element,
which is how "pressed-in" or neumorphic looks are built. Subtle defaults (small offsets, large
blur, low-alpha dark color) read as "elevation"; high-contrast shadows read as "drop shadow."
Frequently asked questions
- A CSS property that draws one or more shadows around an element's border box, defined as offset-x offset-y blur spread color, with an optional inset keyword.
- Yes — CSS accepts a comma-separated list. This tool focuses on one shadow at a time; copy a layer and append additional shadows by hand for multi-layer effects.
- Blur softens the shadow edge. Spread grows (positive) or shrinks (negative) the shadow before blurring, useful for creating offset rings.
- Tailwind reads any arbitrary value via the box-shadow utility, e.g. shadow-[0_4px_12px_rgba(0,0,0,0.15)]. Copy the value, drop it into the brackets.