Box Shadow Generator
Build CSS box-shadow values visually. Tune X/Y offset, blur, spread, color, and the inset keyword. Stack multiple layers and copy the result.
What you'll use this for
Shadows define depth, hierarchy, and focus on the web. Stack several layers for richer, more believable lighting.
Card design
Raise cards off the page with a soft drop shadow — the bread and butter of modern UI.
Button design
Subtle interactive feedback — give buttons a hover-state shadow to imply elevation change.
Modal frames
Anchor overlay surfaces with a strong drop shadow so they read clearly above page content.
Neon effects
Layer a bright, low-blur shadow over a wider one to fake glowing borders and accents.
How to build a box-shadow
Set offset
X moves the shadow horizontally, Y vertically. Positive Y casts the shadow downward.
Tune blur & spread
Blur softens the edge. Spread grows or shrinks the shadow before blurring.
Stack layers
Click + to add another shadow. Combine a sharp close shadow with a soft far one for realism.
Copy the CSS
Grab the generated value or download a .css snippet ready to drop into a stylesheet.
Frequently asked questions
Yes. The generated CSS is valid and can be pasted directly into a stylesheet, style attribute, or CSS-in-JS string.
box-shadow is supported in every evergreen browser and has been since 2011. No vendor prefixes are required.
Yes. No signup, no limits, no ads.
It draws the shadow inside the element's border rather than outside — useful for pressed-button effects, inner glows, or carved insets.
CSS itself imposes no hard limit. In practice, 2–5 layers is the sweet spot — past that the paint cost rises and visual gains diminish.
About CSS box-shadow
The CSS box-shadow property attaches one or more drop (or inset) shadows to an element. Each shadow is defined by <x-offset> <y-offset> <blur> <spread> <color> [inset] — separate multiple shadows with commas.
How layering works
- The first shadow in the list paints on top of the others.
- Each layer is rendered independently — they don't blend additively in lighting terms, just overlap.
- Use a tight close shadow plus a wider soft one for a more physically plausible look.
Performance
- Shadows are GPU-friendly when the element doesn't change frequently.
- Animating
box-shadowdirectly is expensive — prefer animating a transparent pseudo-element's opacity for hover effects. - Compatible with every modern browser (MDN reference).