Live Preview
Watch the shadow change on a real box as you drag each slider, so there is no guesswork.
Box Shadow Generator
Build a CSS box-shadow with sliders and a live preview, then copy the code. Set offset, blur, spread, color, and inset, and watch the box update. Free, no signup.
Guide
How to use the box shadow generator
1
Set The Offset And Blur
Drag the horizontal, vertical, blur, and spread sliders to shape the shadow.
2
Choose Colors
Pick the shadow color and opacity, and the box color, then toggle inset if you need an inner shadow.
3
Copy The CSS
When the preview looks right, copy the box-shadow line and paste it into your stylesheet.
Stop Guessing Box Shadow Values
The CSS box-shadow property packs four numbers, a color, and an optional inset keyword into one line, and small changes make a big visual difference. Typing values blind and refreshing to check is slow. A visual builder lets you drag each value and see the result instantly.
This generator gives you a live box and a slider for every part of the shadow: horizontal offset, vertical offset, blur, spread, and opacity. Pick the shadow color and the box color, switch to an inset shadow when you need a pressed look, and the exact CSS updates as you go.
When it looks right, copy a single clean box-shadow line and drop it into your stylesheet. It is handy for cards, buttons, modals, and hover states. Everything runs in your browser, so nothing is sent anywhere.
Benefits
Why Use Our Box Shadow Generator?
Full Control
Set horizontal and vertical offset, blur, spread, color, and opacity, all in one place.
Inset Shadows
Flip a switch to turn an outer shadow into an inner one for pressed or inset looks.
Custom Colors
Choose any shadow color with adjustable opacity and set the box color to test contrast.
Copy Clean CSS
Get one ready to paste box-shadow line that works in every modern browser.
In Your Browser
Everything runs on your device. Nothing is uploaded and there is no signup.
Explore More
Similar Tools
More Developer tools you might find useful.
FAQ
Frequently Asked Questions
Common questions about CSS box shadows.
What do the box-shadow values mean?
The order is horizontal offset, vertical offset, blur radius, spread radius, then color. Offsets move the shadow, blur softens its edge, spread grows or shrinks it, and color sets the tint and, with rgba, the opacity.
How do I make an inner shadow?
Add the inset keyword at the start of the value, or toggle the inset switch in this tool. An inset shadow is drawn inside the box instead of outside, which is useful for pressed buttons and input fields.
Can I add more than one shadow?
CSS allows multiple shadows separated by commas. This tool builds one shadow at a time, but you can copy two results and join them with a comma to stack shadows.
How do I make a soft, subtle shadow?
Use a small offset, a larger blur, a spread of zero or slightly negative, and a low opacity like 10 to 20 percent. Subtle shadows read as depth without looking heavy.
Does this tool send my data anywhere?
No. The shadow and CSS are generated entirely in your browser. Nothing is uploaded, logged, or stored.
Is the box shadow generator free?
Yes, it is completely free with no limits and no signup.