Box Shadow Generator
Tweak sliders to instantly generate a CSS box-shadow.
Online CSS Box Shadow Generator
Adding depth and elevation to UI elements is a staple of modern web design. However, manually typing out CSS box-shadow rules with X/Y offsets, blur radii, and spread values often requires a lot of guesswork. Our interactive Box Shadow Generator provides a visual interface to design perfect shadows in seconds.
Interactive Visual Editor
Use the intuitive sliders to adjust the horizontal and vertical offsets, tweak the blur radius for a softer look, and change the spread radius to grow or shrink the shadow. As you move the sliders, the preview box updates in real-time so you can see exactly how the shadow will look on a web page.
Instantly Copy CSS Code
Once you are happy with the visual preview, the exact CSS rule is generated automatically in the output box. Simply click copy and paste the clean, cross-browser compatible CSS directly into your project's stylesheet or inline styles.