Generate CSS box-shadows with live preview. Add multiple shadow layers for depth and realism, then copy the CSS.
Drag sliders to adjust horizontal offset, vertical offset, blur radius, spread, colour, and opacity for a CSS box-shadow. Tick Inset for an inner shadow effect. The preview updates live and the generated CSS is ready to copy straight into your stylesheet.
Use the sliders to adjust each shadow parameter. Tick Inset to make it an inner shadow. Click the colour swatch to change the shadow colour. The generated CSS updates live in the dark code block — click Copy to grab it.
Spread expands (positive value) or contracts (negative value) the shadow before blur is applied. A positive spread makes the shadow larger than the element; negative makes it smaller.
CSS supports multiple box-shadows as a comma-separated list. Generate each shadow here separately and combine them manually in your CSS: box-shadow: shadow1, shadow2;
This tool runs entirely in your browser. Nothing you type or paste is sent to any server — all processing happens locally on your device.