CSS Box Shadow

CSS box-shadow Property

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

---

Specify a Horizontal and a Vertical Shadow

In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color.

Output :

Specify a Color for the Shadow

The color parameter defines the color of the shadow. You can use named colors, hex, rgb, or rgba values for more control.

Output :

Add a Blur Effect to the Shadow

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

Output 3:

Set the Spread Radius of the Shadow

The spread parameter defines the spread radius. A positive value increases the size of the shadow, while a negative value decreases the size of the shadow.

Output :

Add Multiple Shadows

An element can also have multiple shadows:

Output:-:

Cards

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

Output:-: