CSS Box Shadow Generator
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Last updated: 2026 · Free online tool
What is CSS Box Shadow Generator?
Free online CSS box-shadow generator with controls for offset, blur, spread, color and inset, offering a live preview of the shadow and producing copy-ready box-shadow CSS code for any element.
How to Use
- 1 Select Preset — Start quickly with a preset button.
- 2 Adjust Sliders — Adjust the shadow using X/Y offset, blur, and spread sliders.
- 3 Preview — Check the result in real-time in the preview above.
- 4 Copy CSS — Use the copy button to get the box-shadow CSS.
Related Tools
CSS Gradient Generator Free online visual CSS gradient generator: design linear, radial and conic gradients, add color stops, tweak the angle, then copy ready-to-use CSS for your backgrounds.
CSS Border Radius Generator Free online CSS border-radius generator with eight independent corner handles and sliders, giving a live preview of the rounded shape and producing copy-ready border-radius CSS code for any element.
CSS Flexbox Generator Free online CSS Flexbox playground with a visual editor for justify-content, align-items, flex-direction and wrap, showing a live layout preview and generating copy-ready Flexbox CSS for your container.
Frequently Asked Questions
Yes, use the 'Add Shadow' button to layer multiple shadows.
Yes, enable the Inset checkbox on each shadow to create an inner shadow.
Five presets are provided: Subtle, Medium, Large, Inset, and Double.
Yes, you can directly enter rgba(0,0,0,0.15) format in the color input field.
No. All calculations are done in the browser.