Visual CSS Box Shadow Generator

Design complex box shadows with an interactive tool and copy the code.

Controls

10px
10px
5px
0px
0.25
box-shadow: ;

How to Use

  1. Use the Sliders: Adjust the shadow's position (Offset X, Offset Y), blur, and spread by moving the sliders.
  2. Choose Colors: Use the "Box Color" picker for the box and the "Shadow" picker for the shadow's color. Control the shadow's transparency with the "Opacity" slider.
  3. Toggle Inset: If you want the shadow to be inside the box, turn on the 'Inset Shadow' toggle.
  4. Copy the Code: Once you are happy with your design, copy the CSS code from the code box and use it in your project.