Drag the sliders to shape the shadow, pick a color, and the CSS box-shadow declaration updates live in the box below - no upload, nothing leaves your browser.
- Set the horizontal and vertical offset to move the shadow left/right and up/down.
- Set blur radius to soften the edge and spread radius to grow or shrink the shadow shape.
- Pick a shadow color and opacity, then check "Inset" for an inner shadow instead of a drop shadow.
- Copy the generated CSS line straight into your stylesheet.
CSS Box-Shadow Generator
The CSS Box-Shadow Generator turns slider positions into a ready-to-paste box-shadow line: set the horizontal and vertical offset, blur radius, spread radius, shadow color and opacity, and an inset toggle, then copy the result.
Every change updates the preview swatch and the generated CSS text instantly - there is no separate "Generate" click and nothing is uploaded, since the whole calculation runs in your browser.
Use this tool when you want a drop shadow or an inner (inset) shadow on a card, button, or panel. It is not for building a color gradient background - the CSS Gradient Generator covers multi-color animated gradients with vendor-prefix fallbacks; the two tools produce different CSS properties for different visual effects.
Negative offset values push the shadow left or up; positive values push it right or down. A larger blur radius softens the edge into a glow, while spread radius grows or shrinks the shadow shape independently of the box itself. Checking Inset flips the shadow to render inside the element's border instead of behind it - useful for a pressed-button or recessed-panel look.
Frequently Asked Questions
What does the CSS Box-Shadow Generator do?
It builds a single box-shadow CSS declaration from six controls - horizontal offset, vertical offset, blur radius, spread radius, shadow color with opacity, and an inset toggle - and shows a live preview swatch plus the copyable CSS text as you adjust each slider.
How is this different from the CSS Gradient Generator?
The Box-Shadow Generator produces a box-shadow line for drop or inset shadows on elements like cards and buttons. The CSS Gradient Generator produces a background gradient with animation keyframes for multi-color backgrounds - a different CSS property for a different visual effect.
What does the "Inset" checkbox do?
Checking Inset switches the shadow from a drop shadow (rendered outside the element, behind it) to an inner shadow (rendered inside the element's border) - useful for a pressed-button or recessed-panel look.
Does anything get uploaded when I use this tool?
No. The offset, blur, spread, color, and opacity values are read directly from the sliders in your browser and the CSS text is generated locally - nothing is sent to a server.