How to Set Box Shadow Only at Bottom in CSS

This article will introduce sets box-shadow only to the bottom of the box in CSS.

Use the box-shadow Property to Set the Bottom Box Shadow in CSS

We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.

The property takes several options. First, let’s understand the property from its syntax, shown below.

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

It is essential to understand how the box-shadow property works to implement it. The h-offset option sets the shadow in the horizontal direction of the element.

The positive value will set the shadow to the right direction of the element, while the negative value will set the shadow to the left direction of the element.

Likewise, the v-offset option sets the shadow vertically. Again, the positive value sets the shadow to the bottom, while the negative value sets it to the top of the element.

The blur-radius option indicates the blur radius of the shadow. As the blur radius increases, the shadow becomes more blurred.

The spread-radius option sets the size of the shadow to the element. The positive value increases the shadow’s size while the negative value decreases.

We can also use the color option to set the color of the shadow. However, the options blur-radius, spread-radius and color are optional.

Now that we have learned how the box-shadow property works, it’s time to implement it to create a bottom shadow to a box.

For that, we can set h-offset to 0 and give some value to v-offset. As a result, the shadow will appear only at the bottom of the box.

For example, create a box with a certain height and width. Set the background-color property to black.

Next, use the box-shadow property to set the various options. Set 0 for h-offset, 8px for v-offset, 2px for blur-radius, -2px for spread-radius and the color as gray.

As a result, we get a black box with a grey shadow at its bottom. Thus, we learned how to use the box-shadow property to set the shadow to the bottom of the box in CSS.

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}