Craft a CSS box-shadow with live preview — adjust offset, blur, spread, color, and opacity, and toggle inset — then copy the exact CSS.
How it works
- Adjust the X/Y Offset, Blur, and Spread sliders to shape the shadow.
- Pick a color and lower the opacity to create a subtle, natural effect.
- Copy the output CSS block directly into your project.
Frequently asked questions
What do offset, blur, and spread technically do?
Offset physically moves the shadow across the X/Y axis. Blur softens the hard edges. Spread inflates or deflates the core shadow size.
What exactly is an inset shadow?
An inset shadow is drawn entirely inside the boundaries of the element, which creates a recessed, pressed, or "well" effect.
How do I layer multiple complex shadows together?
In CSS, you can combine multiple box-shadow values by separating them with commas. You can generate them individually here and chain them together.