CSS Box-Shadow Bottom Only

We will understand the CSS box shadow bottom only in this article.

CSS Box-shadow

The "box-shadow" is the CSS property that is utilized to add the shadow to the HTML element.

Syntax:

The values that the box-shadow property takes are described below:

1. H-shadow: It represents the horizontal offset of the box shadow. It can be both negative and positive values. If it is a positive value, then the shadow is created towards the right, and if it is a negative value, then the shadow is created towards the left.
2. V-shadow: It represents the vertical offset of the box shadow. It can have both negative and positive values. If it is a positive value, the shadow is created downwards, and if it is a negative value, it is created upwards.
3. Blur: It represents the blur radius of the box shadow. If the value is large, the blurred shadow will be greater, and if the value is small, the blurred shadow will be less.
4. Spread: It represents the spread radius of the box shadow. It can be both negative and positive values. If it is a positive value, then the box shadow will expand, and if it is a negative value, then the box shadow will contract.
5. Color: It represents the color of the box shadow.
6. Inset: It makes the box shadow appear inside the HTML element.

Illustrations of the CSS Box-shadow Bottom Only

Let us comprehend the CSS box shadow bottom only with the help of illustrations.

Illustration 1:

We will construct a shadow at the bottom of the <div> element utilizing the CSS box-shadow property. We will create a shadow outside and inside of the bottom of the element. We will provide h-shadow, v-shadow, blur, spread, and color values to the CSS box-shadow property to create the shadow on the outside of the bottom of the element.

We will provide inset value along with h-shadow, v-shadow, blur, spread, and color values to the CSS box-shadow property to create the shadow on the inner side of the bottom of the element.

Code:

Output:

Here is the output in which we can witness a shadow at the bottom of the HTML elements. We can witness the shadow on the outer side of box 1 and the inner side of box 2.

Illustration 2:

We will create a query form with a button and add a shadow at the bottom of the button utilizing the CSS box-shadow property.

Code:

Output:

Here is the output in which we can witness a shadow at the bottom of the button inside the form.

Illustration 3:

We will create a form and add a shadow at the bottom of the <input> element utilizing the CSS box-shadow property.

Code:

Output:

Here is the output in which we can witness a shadow at the bottom of the button inside the form.

Illustration 4:

We will create an animated shadow to the element utilizing the CSS box-shadow property.

Code:

Output:

Here is the output in which we can witness an animated shadow on the outer side and the inner side of the bottom of the HTML element.

Illustration 5:

In this demonstration, we will add a double shadow to the bottom of the card by utilizing the CSS box-shadow property. We will write the value twice in the box-shadow property to create a double shadow.

Code:

Output:

Here is the output in which we can witness a double shadow at the bottom of the card.

Illustration 6:

We will create the navigation bar with a shadow at the bottom utilizing the CSS box-shadow property.

Code:

Output:

Here is the output in which we can witness the navigation bar with a shadow at the bottom.

Illustration 7:

We will add a shadow at the bottom of the image in this demonstration utilizing the CSS box-shadow property.

Code:

Output:

Here is the output in which we can witness a shadow at the bottom of the image.

Browser Support

Following are the browsers that support the CSS box-shadow property:

• Google Chrome
• Safari
• Firefox
• Opera
• Microsoft Edge

Conclusion

This article explains the CSS box shadow bottom only. It shows how to add a shadow at the bottom of the HTML element utilizing the CSS box-shadow property.