CSS Tools CSS Box Shadow Generator
Build box shadows visually and copy clean CSS. Set blur, spread, offset and color with transparency, stack several shadows and drag them right on the preview.
How to Use the Shadow Generator
Set Shadow Parameters
Adjust blur, spread and the X/Y offset with sliders or exact values. Pick a color and lower its opacity for softer, more natural shadows.
Stack Several Shadows
Use “Add Layer” to add another shadow. Each new layer gets a bigger blur and a random color, which makes soft layered shadows quick to build. Hide or delete any layer.
Preview Your Design
Check the shadow on a square, horizontal and vertical rectangles, or a circle. Change the background and the element color to match your design.
CSS Box Shadow Syntax
box-shadow: x-offset y-offset blur spread color;
Several shadows are separated by commas, and the first one is drawn on top:box-shadow: 0px 4px 8px 0px #00000033, 0px 16px 32px 0px #0000001a;