Create and customize CSS box shadows with a visual editor. Preview shadows in real-time and copy the generated CSS code.
Presets
Shadow layers
2Layer 1
0 8 24 0 · 16%
Layer 2
0 2 6 0 · 12%
Edit layer
Tip: with a layer selected, use arrow keys to nudge X/Y (hold Shift for ±10).
Alpha · 16%
Preview settings
Import from CSS
Paste an existing box-shadow value to load it as editable layers.
box-shadow: 0px 8px 24px 0px rgba(20, 20, 40, 0.16), 0px 2px 6px 0px rgba(20, 20, 40, 0.12);
Layers
2
Max blur
24px
