How to Add Shadow Effect to Div Element Using CSS

Last Updated on February 13, 2021 by Roshan Parihar

In this tutorial, learn how to add a shadow effect to div element using CSS. The short answer is: Use the CSS box-shadow property to apply shadow to any div element. Create a shadow and add it to an element using CSS.

It applies the effect to the single or both the sides of the div element as well as inside or outside. You may also like to read how to change background transparency of div element without affecting its child element.

How to add Shadow Effect to Div Element Outside Using CSS

To add a shadow effect to div outside using CSS, you have to use the box-shadow property of CSS. Create a div element and give height and width to the element. Now, apply the box-shadow property with the values as given below.

Output

The above-given example showing the outer shadow effect to the div element. Change the value of the box-shadow CSS and also change color as per your requirement.

You can also give shadow to the inner side of the HTML div element. Use the below-given example to add shadow inside of the div element.

Apply Inside of Element Using CSS

If you want to apply the effect to the inner part of the div element. You have to add inset as the value of the box-shadow property. This applies the inner box-shadow to the inner part of the div element.

Output

The above example contains the shadow effect with the inner part of the content. You can also change the size and the color as per your requirement.

You May Also Like to Read.

• Center align div element horizontally using CSS.
• Highlight alternate table row color using CSS.
• How to highlight table row on hover mouse using CSS.

I hope you like this tutorial on how to add a shadow effect to div element using CSS.