🪟CSS Box Shadow Generator

Design CSS box-shadows visually with sliders. Stack multiple layers and copy the generated CSS instantly.

Advertisement
🪟

CSS Box Shadow Generator

Design CSS box-shadows visually with sliders. Stack multiple layers and copy the generated CSS instantly.

✓ FreeNo loginInstant results
Shadow 1
X Offset: 0px
Y Offset: 4px
Blur: 12px
Spread: 0px
Color
Generated CSS Copy
box-shadow: 0px 4px 12px 0px #00000020;

How it works

The CSS box-shadow property lets you add shadow effects around an element's frame. This tool provides an interactive visual editor where you can adjust the X offset, Y offset, blur radius, spread radius, and colour for one or more shadow layers. The generated CSS updates in real time.

01
Adjust sliders to tune the shadow
02
Add layers for complex shadows
03
Copy the generated CSS property
Advertisement