CSS Box Shadow

CSS box-shadow Property

CSS box-shadow The attribute applies shadow to the element.

The simplest usage is to specify only the horizontal and vertical shadows:

Yellow <div> element with black box-shadow

Example

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

try it yourself

Next, add color to the shadow:

Yellow <div> element with grey box-shadow

Example

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

try it yourself

Next, add a blur effect to the shadow:

Yellow <div> element, with blurred box-shadow

Example

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

try it yourself

card

You can also use box-shadow Create paper card effect of attribute:

1
January 1, 2021
Coffee
Coffee

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;
}

Try It Yourself: Paper CardTry It Yourself: Image Card

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Add one or more shadows to an element.
text-shadow Add one or more shadows to the text.