Box Shadow Generator
12 toolsDesign a CSS box-shadow visually.
Runs in your browser — your files and text stay on your device
Design a CSS box-shadow visually and copy the code. Adjust offset, blur, spread, color and opacity, and layer several shadows for natural-looking depth. Keep opacity low, and avoid animating box-shadow directly, since that can be slow to paint.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
X offset0px
Y offset10px
Blur20px
Spread0px
Opacity20%
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);How to use this tool
- 1Drag the X offset, Y offset, Blur, and Spread sliders to shape the shadow.
- 2Pick a shadow color and adjust Opacity.
- 3Check Inset for a pressed-in look. Copy the generated CSS.
Frequently asked questions
What's the difference between blur and spread?
Blur softens/feathers the shadow's edge. Spread expands or shrinks the shadow's shape itself before blurring.
Is this generated on a server?
No — everything is computed entirely in your browser.