Box Shadow Generator
Craft perfect CSS box shadows with sliders — live preview, copy-paste code.
How to use the box shadow generator
- Drag the sliders to position, blur, and spread the shadow.
- Pick a color and dial the opacity — dark colors at low opacity look most natural.
- Toggle inset for an inner shadow, then copy the CSS.
Shadows that look expensive
Great shadows are felt, not seen. The classic recipe is a large blur radius with low opacity (10–20%) and a slight downward offset — it reads as soft ambient light rather than a hard drop shadow from 2005. Layering two shadows (one tight and dark for definition, one wide and faint for atmosphere) creates the depth you see on premium sites; comma-separate them in the box-shadow property. Colored shadows are having a moment: a shadow tinted with your brand color at low opacity feels cohesive in a way pure black never does. And restraint compounds — cards, modals, and buttons each deserve their own shadow scale, with interactive elements getting slightly deeper shadows to feel “touchable.”
Frequently asked questions
What do the four length values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius. So 0 10px 25px 0 means no sideways shift, 10px down, 25px of blur, no spread.
What does inset do?
It flips the shadow inside the element's border — useful for pressed-button states, inner glows, and vignette effects.
Why does my shadow look harsh?
Almost always too much opacity or too little blur. Drop opacity to 10–20% and raise the blur; shadows in the real world are soft.
Can I animate box shadows?
Yes, with CSS transitions — but animating box-shadow is expensive for the browser. For hover effects, consider transitioning opacity on a pseudo-element shadow instead.