CSS Box Shadow

The CSS box-shadow property is used to apply one or more shadows to an element.

Box shadow

In its simplest use, you can only specify the horizontal and the vertical offset of the shadow.

In addition, you can add a shadow color, a spread radius, a blur effect, and change the shadow from an outer shadow to an inner shadow (inset).

In its simplest use, you only specify the horizontal and the vertical offset of the shadow.

The default color of the shadow is the current text color.

The color parameter defines the color of the shadow.

The blur parameter defines the blur radius of the shadow. The higher the number, the more blurred the shadow will be.

The spread parameter defines the spread radius of the shadow.

A positive value increases the size of the shadow, and a negative value decreases the size of the shadow.

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow (inside an element's frame).

An element can also have multiple shadows.

To attach more than one shadow to an element, add a comma-separated list of shadows.

You can also use the box-shadow property to create paper-like cards:

The following table lists the CSS shadow properties: