Create unique shadows with sliders, colors, and opacity. See it live and grab the cross-browser code!
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.