How to Add Shadow Effect to Div Element Using CSS

In this tutorial, learn how to add 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.

The box-shadow effect of CSS adds shadow to single or both the sides of the div element. You can add shadow effect to div 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 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 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.

Add Shadow Effect to Inside of Div Element Using CSS

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

Output

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

You may also like to read.

Hope, you like this tutorial of how to add shadow effect to div element using CSS. If you have any query regarding this tutorial, you can comment below.

Also, tell me, which method are you using to add shadow effect to div element.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.