Pure Css Shadows

Little details like adding one pixel shadows to a DIV element makes your design look more clean and professional. In this post I will show you how to add pure CSS shadows to your DIV’s.
So lets get started with the basic HTML structure

<div class="shadow">
     <div class="main">
          Content Here
      </div>
<div>

You can see from the code above that we are using two DIV’s to get the effect. First we open the shadow DIV. Then we place the content DIV inside the shadow DIV and close the shadow DIV. Now this is just two DIV so lets add some CSS to make this complete.

.shadow {
	border-width: 1px;
	border-color: #EEEEEE;
	border-style: solid;
		}

.main {
	background-color: #FFFFFF;
	border-width: 1px;
	border-color: #CCCCCC;
	border-style: solid;
		}

Now you can see that its just basic CSS, first we add a gray border to the content then we add a lighter border to the shadow DIV. You can use any colors just set the border color that you want for the “main” DIV then mix the color just a little lighter for the shadow border.
Thanks it, that’s how easy it is to make simple Pure CSS Shadows without having to deal with images.

Examples: