CSS Box Shadow Generator

Adjust box-shadow visually with sliders. Multi-layer, inset toggle, live preview, copy CSS in one click.

100% Free No signup Browser-only 5 languages Dark mode

Shadow Layers

Background Element Radius 12px

Where do I paste this?

Inside any CSS selector, e.g. .card { box-shadow: ... }

What is inset?

Draws the shadow inside the element — useful for inset/pressed-button look

Why combine multiple shadows?

Layering a soft close shadow with a longer one creates realistic depth (Material Design and Apple HIG do this)

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.