CSS box shadow generator
Create soft, realistic shadows by stacking layers — the technique behind polished interfaces. Start from a preset, tweak each layer's offset, blur, spread and opacity, and copy the CSS or a ready Tailwind arbitrary class.
Layered CSS box shadows with live preview.
How to use the box shadow generator
- Pick a preset: soft, layered, floating or sharp.
- Adjust each layer, or add more layers.
- Set the shadow color, background and corner radius.
- Copy the CSS or the Tailwind class.
Why layered shadows look better
Real objects cast a tight, dark shadow close to them and a wide, faint one further away. Stacking two to four shadows with increasing blur and decreasing opacity reproduces that depth far better than a single large blur.
Frequently asked questions
How do I add a shadow in CSS?
Use box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); — or design it visually above and copy the result.
Can I use it with Tailwind?
Yes, copy the shadow-[…] arbitrary value from the output.