CSS Box Shadow Generator
Design shadows for cards, buttons and modals with sliders and a live preview, then copy the exact CSS.
Free · No sign-up · Files stay on your device
How to use Box Shadow Generator
- 1Adjust offset, blur and spread.
- 2Pick the colour and opacity, or tick Inset.
- 3Copy the CSS.
Features
- Offset, blur and spread sliders
- Colour with opacity
- Inset shadows
- Presets: soft, card, glow
- Live preview and copy
Realistic shadows
Soft, modern shadows use a small vertical offset, a large blur and low opacity (10–20%). Inset shadows look pressed in, which suits input fields and toggles.
Frequently asked questions
What does spread do?
Positive spread makes the shadow larger than the element; negative spread makes it smaller.
Can I add several shadows?
Copy this one, then add more values separated by commas in your CSS.
Does box-shadow affect layout?
No. Shadows are drawn outside the element without moving anything.
Related tools
CSS Gradient GeneratorCreate beautiful CSS gradients online: linear or radial, any angle, up to 5 colour stops. Live preview and ready-to-copy CSS code. Free.Color Palette GeneratorGenerate colour palettes from any base colour: complementary, analogous, triadic, split-complementary, tetradic, shades and tints. Copy HEX or CSS variables.Color Contrast CheckerCheck the contrast ratio between text and background colours for WCAG 2 AA and AAA accessibility. Live preview, pass/fail results and HEX input. Free.