Back to all tools

CSS Box Shadow Generator

Generate CSS box-shadow values with a live preview.

0px
4px
16px
0px
CSS Output
box-shadow: 0px 4px 16px 0px #00000040;

About CSS Box Shadow

CSS Box Shadow Generator lets you design box shadows visually with sliders for horizontal offset, vertical offset, blur, spread, opacity, and color. Multiple shadow layers can be added for complex effects. Copy the final CSS property with one click for immediate use in your stylesheets.

  • Visual sliders for all shadow values
  • Multiple shadow layer support
  • Inner shadow option
  • Copy ready CSS property

Related Tools

CSS Border Radius
Create CSS border-radius shapes
Aspect Ratio Calculator
Calculate image aspect ratios