📦 CSS Box Shadow Generator
Design box-shadow effects with a live preview. Adjust horizontal/vertical offset, blur, spread, color, opacity, and inset — then copy production-ready CSS in one click. No upload, no signup.
About the CSS Box Shadow Generator
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas, each defined by 2-4 length values (horizontal offset, vertical offset, blur radius, spread radius), an optional color, and an optional inset keyword. This generator lets you craft the perfect shadow with live controls and copy the result instantly.
Properties you can control
- Horizontal offset — Positive moves the shadow right, negative moves it left.
- Vertical offset — Positive moves the shadow down, negative moves it up.
- Blur radius — The higher the value, the bigger and softer the blur.
- Spread radius — Positive grows the shadow, negative shrinks it.
- Color & opacity — Pick any color and tune its transparency.
- Inset — Renders the shadow inside the element instead of outside.
How to use
- Drag the offset sliders to position the shadow.
- Adjust blur and spread for softness and size.
- Pick a color and tune its opacity.
- Toggle inset for an inner shadow if needed.
- Click Copy CSS and paste into your stylesheet.
Frequently asked questions
Can I layer multiple shadows? The generator outputs a single shadow for clarity, but you can paste multiple copied values comma-separated to stack them.
Why does my shadow look invisible? A 0% opacity or a 0 blur/spread with the same color as the element may render invisibly. Increase opacity or blur to make the shadow visible.
Does it work on older browsers? box-shadow is supported in all modern browsers. Very old browsers may need the -webkit- prefix, which you can add manually.