About this tool
With box-shadow an element casts a shadow in CSS. Shadows show what sits “above” the page – cards, menus, dialogs or buttons – and give flat interfaces depth. Good shadows are usually softer and lighter than you would think.
The generator shows every change instantly on a preview box whose color, background and corner radius you can adjust. Stack up to ten shadow layers, e.g. a tight and a wide shadow for a more natural look, and turn any layer into an inner shadow (inset).
Presets like “Soft”, “Layered” or “Glow” give you a quick starting point. The settings are stored in the URL, so you can share a shadow as a link.
How it works
- Pick a preset or start with the default shadow.
- Move the sliders for offset, blur, spread and opacity and choose each layer’s color.
- Add more layers if needed or turn a layer into an inner shadow with “Inset”.
- Copy the CSS code into your stylesheet.
Frequently asked questions
What do blur and spread mean?
Blur sets how softly the shadow’s edge fades out. Spread grows or shrinks the shadow before blurring. A negative value keeps the shadow visible only at the bottom instead of sticking out at the sides.
Why several shadow layers?
Real light creates a darker, tight shadow right under an object and a light, wide shadow around it. Two or more stacked layers imitate that and look much more natural than a single shadow.
How is this different from filter: drop-shadow()?
box-shadow always follows the element’s rectangle (with its corner radius). drop-shadow() follows the visible shape, such as the outline of a transparent PNG or SVG, but has no spread and no inner shadow.
How do I choose a good shadow color?
Instead of pure black, a very dark shade of the background color with low opacity often looks more harmonious. Find matching shades with the Color Palette Generator; for a soft background, try a gradient from the CSS Gradient Generator.