CSS Box Shadow

1 min read

Агуулга

SS 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

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

Next, add a color to the shadow:

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

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

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

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

The box-shadow property can be used to create paper-like cards:

January 1, 2016

Svkhbaatar square,Mongolia

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

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

Updated on 05/11/2021