How to add a shadow to an element

In this guide you can find out how to add a shadow to any box on your page.

Adding box shadows

Shadows are a common design feature that can help elements stand out on your page. In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow).

The box-shadow property takes a number of values:

The offset on the x-axis
The offset on the y-axis
A blur radius
A spread radius
A color
The inset keyword

In the example below we have set the X and Y axes to 5px, the blur to 10px and the spread to 2px. I am using a semi-transparent black as my color. Play with the different values to see how they change the shadow.

html

<div class="wrapper">
  <button class="shadow">box-shadow</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  background-color: #db1f48;
  color: #fff;
}

css

.shadow {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

Note: We are not using inset in this example, this means that the shadow is the default drop shadow with the box on top of the shadow. Inset shadows appear inside the box as if the content were pushed back into the page.