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 to press.
Key features
- Horizontal offset slider, range -50px to 50px, default 10px, plus a vertical offset slider over the same range and default.
- Blur radius slider, range 0px to 100px, default 20px.
- Spread radius slider, range -50px to 50px, default 0px.
- Shadow color picker (default
#000000) plus an opacity slider from 0 to 1 in 0.05 steps. - Inset checkbox that prepends the
insetkeyword to the generatedbox-shadowvalue. - Live 120x120px preview swatch whose
box-shadowstyle updates on every control change. - Read-only generated CSS text (
box-shadow: <x>px <y>px <blur>px <spread>px rgba(r, g, b, a);) with a copy-to-clipboard button and a manual-copy fallback message. - Renders with working defaults on page load, so output appears with no click required.
When to use it
Reach for this tool when you want a drop shadow or an inner (inset) shadow on a card, button, or panel and need the exact CSS to paste into your stylesheet.
Box-shadow vs gradient background
This tool builds a box-shadow value; it is not for building a color gradient background. The two produce different CSS properties for different visual effects:
| Tool | CSS property | Best for |
|---|---|---|
| CSS Box-Shadow Generator | box-shadow | Drop or inset shadows on cards, buttons, and panels |
| CSS Gradient Generator | background | Multi-color animated gradients with vendor-prefix fallbacks |
Privacy and data handling
Nothing is uploaded when you use this tool - the whole calculation runs in your browser, so your slider values and the generated CSS never leave the device.
How the controls shape the shadow
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.