CSS Box Shadow Generator
CSS box-shadow generator with offset, blur, spread, color and inset controls and a live preview of the shadow. Copy ready-to-use box-shadow CSS for any element, free in your browser.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Embed
Last updated: 2026 · Free online tool
What is CSS Box Shadow Generator?
CSS box-shadow generator with offset, blur, spread, color and inset controls and a live preview of the shadow. Copy ready-to-use box-shadow CSS for any element, free in your browser.
How to Use
- 1Select Preset— Start quickly with a preset button.
- 2Adjust Sliders— Adjust the shadow using X/Y offset, blur, and spread sliders.
- 3Preview— Check the result in real-time in the preview above.
- 4Copy CSS— Use the copy button to get the box-shadow CSS.
Related Tools
CSS Gradient GeneratorVisual CSS gradient generator for linear, radial and conic gradients: add color stops, tweak the angle and copy ready-to-use CSS. Perfect for backgrounds, buttons and hero sections, free in your browser.
CSS Border Radius GeneratorCSS border-radius generator with eight independent corner handles and sliders and a live preview of the rounded shape. Copy ready-to-use border-radius CSS for any element, free in your browser.
CSS Flexbox GeneratorCSS Flexbox playground with a visual editor for justify-content, align-items, flex-direction and wrap, plus a live layout preview. Generate copy-ready Flexbox CSS for your container, free in your browser.
Color ConverterColor converter between HEX, RGB, HSL and OKLCH codes, with the WCAG contrast ratio for any two colors. Check accessibility compliance while you pick palettes, free in your browser.
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.