Box Shadow Generator | CSS Box Shadow Tool
Visual CSS Box Shadow generator with real-time preview.
0px
0px
10px
0px
20%
CSS Code
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
How to Use
- Adjust the sliders to change the horizontal and vertical offset, blur radius, and spread radius.
- Toggle 'Inset' to create an inner shadow.
- Change the shadow color and opacity using the controls.
- Copy the generated CSS code to use in your project.
About Box Shadow
Shift Right (Offset X)
Specifies the horizontal distance of the shadow. Positive values move the shadow to the right, negative values to the left.
Shift Down (Offset Y)
Specifies the vertical distance of the shadow. Positive values move the shadow down, negative values up.
Blur Radius
The larger the value, the bigger and lighter the shadow becomes. If set to 0, the shadow will be sharp.
Spread Radius
Positive values increase the size of the shadow, negative values decrease it.