CSS Box Shadow Generator
Build soft, realistic shadows visually instead of guessing pixel values.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to make a CSS box shadow
- Adjust offset, blur, spread, colour and opacity of each layer.
- Add, duplicate, hide or reorder layers — or pick a preset.
- Copy the CSS, Tailwind or drop-shadow code.
About Box Shadow Generator
Create CSS box shadows visually.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Cards, modals and buttons
- Material and neo-brutalist designs
- Focus rings and glow effects
Tip: Use a dark blue-grey instead of pure black for softer, more natural shadows.
Frequently asked questions
How do I make a realistic shadow?
Stack several soft layers that grow in offset and blur. Use “Smooth layered shadow” to build them automatically, or start from the Floating or Layered smooth presets.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element’s box; filter: drop-shadow follows the actual shape, so it suits transparent PNGs, SVG icons and text. Both are generated.
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before blurring — a negative spread keeps a shadow under the element instead of around it.
Can I use several shadows at once?
Yes. Add layers — they are written as one comma-separated box-shadow, with the first layer drawn on top.
Does box-shadow slow down a page?
Not noticeably in normal use. Very large blurs on many elements, or animating the shadow itself, can be costly — animate opacity or transform instead.