Box Shadow CSS - Cool CSS ⚡ Box Shadow Generator ⚡

Create unique shadows with sliders, colors, and opacity. See it live and grab the cross-browser code!

Preview Box Background

Box Shadow Controls

px
px
px
px
#000000

Generated CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);

About the Box Shadow Generator

The `box-shadow` CSS property adds shadow effects around an element's frame. You can specify multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

  • Offsets (Horizontal & Vertical): Positive values shift the shadow right/down, negative values left/up.
  • Blur Radius: Larger values increase the blur, making the shadow bigger and lighter. Cannot be negative.
  • Spread Radius: Positive values expand the shadow, negative values shrink it.
  • Color & Opacity: Sets the shadow's color and transparency.
  • Inset: Changes the shadow from an outer (outset) shadow to an inner shadow.

Use the controls above to experiment! The preview updates instantly, and the generated CSS code (including the `-webkit-` prefix for older browser compatibility) is ready to copy and paste into your project.