CSS Box Shadow Generator

Generate CSS box-shadow effects visually. Customize offset, blur, spread, and color with a live preview.

Shadow Settings

Horizontal Offset (10px)

Vertical Offset (10px)

Blur Radius (5px)

Spread Radius (0px)

Shadow Color

Inset Shadow

Preview Colors

Box Color

Background Color

Preview

CSS Code

-webkit-box-shadow: ;
-moz-box-shadow: ;

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.