CSS Box Shadow

CSS box-shadow Property

The CSS box-shadow property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

This is a yellow <div> element with a black box-shadow

Example

div {
  box-shadow: 10px 10px;
}

Next, add a color to the shadow:

This is a yellow <div> element with a grey box-shadow

Example

div {
  box-shadow: 10px 10px grey;
}

Next, add a blur effect to the shadow:

This is a yellow <div> element with a blurred, grey box-shadow

Example

div {
  box-shadow: 10px 10px 5px grey;
}

Cards

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

Example

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Example

Norway

Hardanger, Norway


CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text
www.w3schools.com

3D Effect

Portal scene

UI Design