Box Shadow Generator
Visually design CSS box shadows with sliders and a live preview.
Runs entirely in your browser
5px
5px
10px
0px
#000000
25%
CSS
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25); Visually design CSS box shadows with sliders and a live preview.
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25); Design the perfect box shadow visually.
Use the sliders to control offset, blur, spread, color, and opacity.
See your shadow update in real time on the preview box above.
Copy the generated CSS box-shadow property and paste it into your code.
See your shadow update instantly as you drag any slider.
Adjust every parameter including inset mode, color, and opacity.
Get the exact CSS property ready to paste into your stylesheet.
Just open the page and start designing. No sign-ups or logins.