How to Create Box Shadows with CSS?

CSS “box-shadow” property allows you to create simple shadow effects to the elements on your page. You can use this property to create beautiful boxes with shadow effect in top, bottom, right and left direction. In this tutorial we will use :before pseudo element to create different styles of shadow effect to a text box.

Related: How to convert font awesome icon to image?

CSS box-shadow Property Syntax

The syntax of the box-shadow property is as below:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Below is an example when the box-shadow: 10px 10px 10px 10px green inset; is used with a div element:

The inset value indicates the shadow direction should be inside the element. You can use outset to create the shadow effect outside the element.

How to Create Shadow Effects with CSS?

Let us move on creating a shadow effect using CSS pseudo element. First create a box using the below CSS code. We leave the box without defining the dimensions, if you want use specific height and width values.

.box {
background-color:#CDDC39;
color: #333333;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid #cccccc;
margin: 20px;
padding: 15px;
font-size: 18px;
}

Next, create a shadow with the below CSS:

.shadow {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.shadow:before {
position: absolute;
z-index: -1;
display: block;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
content: "";
}

We will display the shadow on the left side and adjust the position using bottom and left values.

.left-shadow:before {
bottom: 25px;
left: 20px;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

Similar to left shadow, define separate styles for right, bottom and simple shadow as below.

.right-shadow:before {
right: 20px;
bottom: 25px;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.bottom-shadow:before {
right: 20px;
bottom: 0;
left: 20px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.simple-shadow:before {
right: 20px;
bottom: 0;
left: 20px;
height: 30px;
}

HTML for Shadow Effects

In order to create s shadow box we need to use one of the above three CSS classes with HTML.

• box class
• shadow class
• choose one of the shadow styles –  left-shadow, right-shadow, bottom-shadow or simple-shadow

For example below is the HTML code for adding left shadow to a div element:

<div class="box shadow left-shadow">
This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;".
</div>

Demo of CSS Shadow Effects

You can adjust the CSS and create right shadow, bottom shadow and plain shadow effects. Below are some of the demos with CSS shadow effects.

Left Side Shadow Effect

Right Side Shadow Effect

Bottom CSS Shadow Effect

Simple CSS Shadow Box