CSS Shadow Generator

Visually create and generate CSS code for box-shadow.

Loading Tool...

Results will appear here.

Mastering CSS Box-Shadow

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.

Key Parameters:

  • Horizontal & Vertical Offset: The position of the shadow.
  • Blur Radius: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
  • Spread Radius: Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
  • Color & Opacity: The color of the shadow.
This generator provides an intuitive interface with sliders to visually craft the perfect shadow, then instantly generates the CSS code for you to copy and paste into your project.