🌫 CSS box-shadow Generator

Visually edit box-shadow with sliders. Stack multiple shadows with live preview and copy the CSS.

✅ 100% free · no signup · nothing sent to any server

🔒 About Privacy

CSS

1

Adjust sliders

Adjust x and y offsets, blur, spread, color and inset. Preview updates instantly.
2

Stack multiple layers

Use the add button to stack multiple shadows. Achieve Material or Neumorphism styles.
3

Copy the CSS

Copy the generated box-shadow property and paste into your CSS.

Is my data sent to your server?

No. Everything runs in your browser. You can verify in the Network tab.

What is inset?

When inset is enabled, the shadow is drawn inside the element instead of outside. Useful for inset / pressed effects.

How many shadows can I stack?

There is no hard limit, but 5 or fewer is practical for rendering performance.

🐛 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.