CSS Box Shadow Generator
What this tool does
Adjust X/Y offset, blur, spread, color, and opacity with sliders and see the shadow update live on a preview box. Toggle Inset to switch between outer and inner shadows. Add multiple shadow layers for depth effects. Apply a preset to start quickly, then fine-tune from there. When the shadow looks right, copy the CSS code with one click.
How to use
- Pick a preset or start from scratch with the default shadow.
- Adjust the sliders to tune offset, blur, spread, and opacity.
- Click the color swatch to change the shadow color.
- Toggle Inset for inner shadows. Use + Add Layer for depth effects.
- Click Copy to copy the generated CSS.
Frequently Asked Questions
What is CSS box-shadow?
The CSS `box-shadow` property adds shadow effects around an element. The full syntax is `box-shadow: [inset] x-offset y-offset blur spread color`. Multiple shadows can be layered by separating them with commas.
What does the Inset option do?
When Inset is enabled, the shadow appears inside the element rather than outside it. This creates a pressed or recessed effect, often used for inner glows or depressed button states.
What is the Spread value?
Spread expands or contracts the shadow before the blur is applied. A positive value makes the shadow larger than the element; a negative value shrinks it. A spread of 0 means the shadow is the same size as the element.
How do I create multi-layer shadows?
Click '+ Add Layer' to create a new shadow layer. Each layer has its own offset, blur, spread, color, and opacity settings. Layers are combined with commas in the CSS output — this is standard CSS and supported in all modern browsers.
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element's rectangular bounding box, ignoring transparency. `filter: drop-shadow()` follows the visible shape of an element (including transparent areas), making it better for non-rectangular elements like SVGs or PNGs with transparent backgrounds.