10 Amazing Effects You Can Create Using Box Shadows

There are some pretty awesome shadow effects that can be given by just using CSS. You can read about the different types of box shadows from Creating Different Box Shadow Effects using CSS. In this article, I will be showing you 10 different shadow effects that you can give using the CSS box-shadow property.

Though giving the above effects may seem tricky, but these are very quick and easy to code.

For getting started, we'll make a div of some length and height and a background-color.

HTML

<div class="block"></div>

CSS

.block{
	width: 300px;
	height: 130px;
	background-color:  #8CA6E8
}

So, let's start with the first one.

#1

First of all, add a box using :before pseudo selector and give it an absolute position at the bottom left with respect to the original block. It is given a width 50% of that of the original block and a background color. It is placed 8px from the left edge, 15 px from the bottom edge and 80% of the height from the top edge of the block.

HTML

<div id="demo1" class="block"></div>

CSS

#demo1{
	position: relative;
}
#demo1:before{
	position: absolute;
	content: "";
	bottom: 15px;
	left: 8px;
	top: 80%;
	width: 50%;
	background: #777;
}

Now, rotate the box in the clockwise direction using the transform property and give it a box shadow. Here the shadow color is given in the shade of the background color of the block.

CSS

#demo1{
	position: relative;
}
#demo1:before{
	position: absolute;
	content: "";
	bottom: 15px;
	left: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
}

In order to hide the newly added box, give it a negative z-index and we are done.

CSS

#demo1{
	position: relative;
}
#demo1:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	left: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
}

#2

For this one also, add a box using :before pseudo selector and give it an absolute position at the bottom right of the original block. Rest all the properties are the same as given in demo 1.

HTML

CSS

#demo2{
	position: relative;
}
#demo2:before{
	position: absolute;
	content: "";
	bottom: 15px;
	right: 8px;
	top: 80%;
	width: 50%;
	background: #777;
}

This time, rotate the box in anticlockwise direction by some angle and give it a box shadow.

CSS

#demo2{
	position: relative;
}
#demo2:before{
	position: absolute;
	content: "";
	bottom: 15px;
	right: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

Now give it a negative z-index to get the desired effect.

CSS

#demo2{
	position: relative;
}
#demo2:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	right: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

#3

This one is just a combination of the above two cases, the left box being added by :before and the right one by :after pseudo selector.

HTML

<div id="demo3" class="block"></div>

CSS

#demo3{
	position: relative;
}
#demo3:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	left: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
#demo3:after{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	right: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

#4

To obtain this, you just need to increase the angle of rotation of the two boxes.

HTML

<div id="demo4" class="block"></div>

CSS

#demo4{
	position: relative;
}
#demo4:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	left: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
#demo4:after{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 15px;
	right: 8px;
	top: 80%;
	width: 50%;
	background: #777;
	-webkit-box-shadow: 0 18px 15px #486685;
	-moz-box-shadow: 0 18px 15px #486685;
	box-shadow: 0 18px 15px #486685;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
}

#5

The same approach will be followed in all the rest examples. We will place an element relative to our block and give it a shadow, and after that give it a negative z-index value.

For this example also, we will add a box using :before pseudo selector and position it absolutely.

HTML

<div id="demo5" class="block"></div>

CSS

#demo5{
	position: relative;
}
#demo5:before{
	position: absolute;
	content: "";
	bottom: 5px;
	left: 30px;
	right: 30px;
	top: 80%;
	background: #777;
}

After this, give it a bottom box-shadow and a border radius because curved objects drop curved shadows.

CSS

#demo5{
	position: relative;
}
#demo5:before{
	position: absolute;
	content: "";
	bottom: 5px;
	left: 30px;
	right: 30px;
	top: 80%;
	background: #777;
	-webkit-box-shadow: 0 0 30px 17px #486685;
	-moz-box-shadow: 0 0 30px 17px #486685;
	box-shadow: 0 0 30px 17px #486685;
	border-radius: 100px/10px; 
}

Finally, give this element a negative z-index.

CSS

#demo5{
	position: relative;
}
#demo5:before{
	position: absolute;
	content: "";
	z-index:-1;
	bottom: 5px;
	left: 30px;
	right: 30px;
	top: 80%;
	background: #777;
	-webkit-box-shadow: 0 0 30px 17px #486685;
	-moz-box-shadow: 0 0 30px 17px #486685;
	box-shadow: 0 0 30px 17px #486685;
	border-radius: 100px/10px; 
}

#6

This is the same as the previous one, with the difference that the height of the added box is more in this case.

HTML

<div id="demo6" class="block"></div>

CSS

#demo6{
	position: relative;
}
#demo6:before{
	position: absolute;
	content: "";
	bottom: 12px;
	left: 30px;
	right: 30px;
	top: 14px;
	background: #777;
}

Now, again add a box shadow and a border radius.

CSS

#demo6{
	position: relative;
}
#demo6:before{
	position: absolute;
	content: "";
	bottom: 12px;
	left: 30px;
	right: 30px;
	top: 14px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 17px #486685;
	-moz-box-shadow: 0 0 30px 17px #486685;
	box-shadow: 0 0 30px 17px #486685;
	border-radius: 100px/10px; 
}

On adding a negative z-index, you will get the following result.

CSS

#demo6{
	position: relative;
}
#demo6:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 12px;
	left: 30px;
	right: 30px;
	top: 14px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 17px #486685;
	-moz-box-shadow: 0 0 30px 17px #486685;
	box-shadow: 0 0 30px 17px #486685;
	border-radius: 100px/10px; 
}

#7

In this case, just change the distance of the box with respect to the four edges of the original block and you will get the desired result.

HTML

<div id="demo7" class="block"></div>

CSS

#demo7{
	position: relative;
}
#demo7:before{
	position: absolute;
	content: "";
	bottom: 20px;
	left: 8px;
	right: 8px;
	top: 20px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 10px #486685;
	-moz-box-shadow: 0 0 30px 10px #486685;
	box-shadow: 0 0 30px 10px #486685;
	border-radius:10px/40px; 
}

Along with changing the distance from the edges of the block, border-radius is also changed in the above code. Now give a negative z-index.

CSS

#demo7{
	position: relative;
}
#demo7:before{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 20px;
	left: 8px;
	right: 8px;
	top: 20px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 10px #486685;
	-moz-box-shadow: 0 0 30px 10px #486685;
	box-shadow: 0 0 30px 10px #486685;
	border-radius: 10px/40px; 
}

#8

This effect can be obtained by combining the above two effects, by adding one of the boxes with :before selector and the other one with :after selector.

HTML

<div id="demo8" class="block"></div>

CSS

#demo8{
	position: relative;
}
#demo8:before{
	position: absolute;
	content: "";
	z-index:-1;
	bottom: 20px;
	left: 8px;
	right: 8px;
	top: 20px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 10px #486685;
	-moz-box-shadow: 0 0 30px 10px #486685;
	box-shadow: 0 0 30px 10px #486685;
	border-radius:10px/40px;
}
#demo8:after{
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 14px;
	left: 30px;
	right: 30px;
	top: 14px;
	background: #777;
	-webkit-box-shadow: 0 0 30px 17px #486685;
	-moz-box-shadow: 0 0 30px 17px #486685;
	box-shadow: 0 0 30px 17px #486685;
	border-radius: 100px/10px; 
}

#9

Two boxes are added near the left and right edges of the block respectively using the two pseudo selectors.

HTML

<div id="demo9" class="block"></div>

CSS

#demo9{
	position: relative;
}
#demo9:before{
	position:absolute;
	content:"";
	top:26px;
	left:5px;
	bottom:50px;
	width:20%;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
	-webkit-box-shadow:0 10px 25px 10px #486685;
	-moz-box-shadow:0 10px 25px 10px #486685;
	box-shadow:0 10px 25px 10px #486685;
}
#demo9:after{
	position:absolute;
	content:"";
	top:26px;
	right:5px;
	bottom:50px;
	width:20%;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	transform: rotate(8deg);	
	-webkit-box-shadow:0 10px 25px 10px #486685;
	-moz-box-shadow:0 10px 25px 10px #486685;
	box-shadow:0 10px 25px 10px #486685;
}

Now simply put a negative z-index.

CSS

#demo9{
	position: relative;
}
#demo9:before{
	position:absolute;
	content:"";
	z-index:-1;
	top:26px;
	left:5px;
	bottom:50px;
	width:20%;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
	-webkit-box-shadow:0 10px 25px 10px #486685;
	-moz-box-shadow:0 10px 25px 10px #486685;
	box-shadow:0 10px 25px 10px #486685;
}
#demo9:after{
	position:absolute;
	content:"";
	z-index:-1;
	top:26px;
	right:5px;
	bottom:50px;
	width:20%;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	transform: rotate(8deg);	
	-webkit-box-shadow:0 10px 25px 10px #486685;
	-moz-box-shadow:0 10px 25px 10px #486685;
	box-shadow:0 10px 25px 10px #486685;
}

#10

This is the last one. If you have followed till here, then it will not be a big deal to create this effect.

HTML

<div id="demo10" class="block"></div>

CSS

#demo10{
	position: relative;
}
#demo10:before{
	position:absolute;
	content:"";
	top:25px;
	left:20px;
	width:80%;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
	-webkit-box-shadow:10px -8px 32px 15px #486685;
	-moz-box-shadow:10px -8px 32px 15px #486685;
	box-shadow:10px -8px 32px 15px #486685;
}
#demo10:after{
	position:absolute;
	content:"";
	width:80%;
	bottom: 25px;
	left:20px;
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	transform: rotate(6deg);
	-webkit-box-shadow:10px 8px 32px 15px #486685;
	-moz-box-shadow:10px 8px 32px 15px #486685;
	box-shadow:10px 8px 32px 15px #486685;
}

This will give the following effect.

CSS

#demo10{
	position: relative;
}
#demo10:before{
	position:absolute;
	content:"";
	z-index:-1;
	top:25px;
	left:20px;
	width:80%;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
	-webkit-box-shadow:10px -8px 32px 15px #486685;
	-moz-box-shadow:10px -8px 32px 15px #486685;
	box-shadow:10px -8px 32px 15px #486685;
}
#demo10:after{
	position:absolute;
	content:"";
	z-index:-1;
	width:80%;
	bottom: 25px;
	left:20px;
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	transform: rotate(6deg);
	-webkit-box-shadow:10px 8px 32px 15px #486685;
	-moz-box-shadow:10px 8px 32px 15px #486685;
	box-shadow:10px 8px 32px 15px #486685;
}

That was it. A similar approach was used in all the effects. A pseudo element was added at different orientations which was then hid, so that only its shadow is visible. You can try other orientations and combinations of boxes and come out with really good effects. If you have created one, then share it in the comment section.

10 Amazing Effects You Can Create Using Box Shadows

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

C++ : Linked lists in C++ (Singly linked list)

Adding Outline to Text Using CSS

Set, toggle and clear a bit in C

12 Creative CSS and JavaScript Text Typing Animations

Inserting a new node to a linked list in C++

pow() in Python

Dutch National Flag problem - Sort 0, 1, 2 in an array

memoryview() in Python

next() in Python

map() in Python

Mouse Rollover Zoom Effect on Images

Important functions in math.h library of C

Formatting the print using printf in C

Linked list traversal using loop and recursion in c++

Calculator using Java Swing and AWT with source code

Animate your Website Elements with CSS Transforms

Controlling the Outline Position with outline-offset

Prime numbers using Sieve Algorithm in C