css3 image shadow effects

Decorate your images with these <strong><em>simple CSS3 image shadow effects</em></strong>. This is pure css3 shadow effects with simple code. so just copy these effects and try one by one on your website images.

HTML

<div class="box" id="shadow1"></div>
<div class="box" id="shadow2"></div>
<div class="box" id="shadow3"></div>
<div class="box" id="shadow4"></div>

CSS

body
{
	background:#eee;
}
.box
{
	width:200px;
	height:200px;
	background:#ccc;
	border:solid 3px #fff;
	margin:20px;
	float:left;
}
#shadow1
{
   -webkit-box-shadow: 0 28px 16px -6px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -6px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -1px rgba(0, 0, 0);
}
#shadow2
{
  position: relative;
}
#shadow2:before, #shadow2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
#shadow2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
#shadow3
{
  position: relative;
}
#shadow3:before, #shadow3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
#shadow3:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

#shadow4
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)...