🌫 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
- ・All processing happens entirely in your browser
- ・Input data is never sent to any server
- ・No logs, no history, no database
- ・No signup, no login, no payment ever
Shadow Layers
Presets
📖 How to Use
-
1
Adjust slidersAdjust x and y offsets, blur, spread, color and inset. Preview updates instantly.
-
2
Stack multiple layersUse the add button to stack multiple shadows. Achieve Material or Neumorphism styles.
-
3
Copy the CSSCopy the generated box-shadow property and paste into your CSS.
❓ FAQ
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.