Box Shadow Generator
Tweak shadow offset, blur, spread, colour and opacity with a live preview box.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);
Frequently Asked Questions
What do the four numbers mean?
box-shadow takes horizontal offset, vertical offset, blur radius and spread radius, then colour. Positive offsets move the shadow right and down.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, creating a pressed or recessed look. Toggle "inset" to preview it.
How do I make a soft, modern shadow?
Use a larger blur (20–40px), a small negative spread, low colour opacity (10–25%) and a modest vertical offset. The "Soft" and "Floating" presets show this style.
Can a shadow use a solid colour?
Yes. Set opacity to 100% for flat design shadows, popular in neo-brutalist styles with zero blur.
Related Tools
CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
Border Radius Generator
Set each corner radius with sliders — including fancy blob shapes — and copy the CSS.
Color Palette Generator
Pick a base colour and get harmonies, tints, shades and a full tonal scale.
Color Code Converter
Convert between HEX, RGB, HSL, and other color formats.