CSS Box Shadow Generator

The CSS Box Shadow Generator allows you to easily create and preview CSS box-shadow effects. The box-shadow property adds shadow effects around an element's frame.

Property Breakdown

Horizontal Offset: Controls the horizontal position of the shadow. Positive values move it right, negative values move it left.
Vertical Offset: Controls the vertical position. Positive values move it down, negative values move it up.
Blur Radius: Determines how blurry the shadow is. Higher values make the shadow bigger and lighter.
Spread Radius: Changes the size of the shadow. Positive values expand it, negative values shrink it.
Inset: Changes the shadow from an outer shadow (default) to an inner shadow.

Browser Support

The box-shadow property is supported by all modern browsers. For maximum compatibility with older versions, we also generate the -webkit- and -moz- prefixes.

The CSS Box Shadow Generator allows you to easily create and preview CSS box-shadow effects. The box-shadow property adds shadow effects around an element's frame.

Property Breakdown

Horizontal Offset: Controls the horizontal position of the shadow. Positive values move it right, negative values move it left.
Vertical Offset: Controls the vertical position. Positive values move it down, negative values move it up.
Blur Radius: Determines how blurry the shadow is. Higher values make the shadow bigger and lighter.
Spread Radius: Changes the size of the shadow. Positive values expand it, negative values shrink it.
Inset: Changes the shadow from an outer shadow (default) to an inner shadow.

Browser Support

The box-shadow property is supported by all modern browsers. For maximum compatibility with older versions, we also generate the -webkit- and -moz- prefixes.