• Home
  • Image Shadow Examples

Image Shadow Examples

On this page, you'll find all the image shadow examples with CSS code as written about in our blog post here.

With all of the examples, we have included a border around the image, the code for the border is as follows:

.imgborder {
   display:inline-block;
   position:relative;
   border:1px solid #ccc;
   padding:5px;
   background:#f2f2f2;
}

Shadow 1

.s1 {
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}

Shadow 2

.s2:before, .s2:after {
   position:absolute;
   z-index:-2;
   content:"";
}
.s2:before {
   top:2%;
   bottom:2%;
   left:2%;
   right:2%;
   -webkit-border-radius:15%;		
   -moz-border-radius:15%;
   border-radius:15%;
   -webkit-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);
   -moz-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);
   box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);
}

Shadow 3

.s3:after {
   content:"";
   position: absolute;
   top:100px;right:0;bottom:0;left: 0;
   z-index:-2;			
   -webkit-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
   -moz-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
   box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   border-radius:50%;
   transform:scaleY(.3);
   -webkit-transform:scaleY(.3);
   -moz-transform:scaleY(.3);
   -ms-transform:scaleY(.3);
   -o-transform:scaleY(.3);
}

Shadow 4

.s4:before, .s4:after {
   content:"";
   position:absolute; 
   z-index:-1;
   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
   box-shadow:0 0 20px rgba(0,0,0,0.8);
   top:50%;
   bottom:0;
   left:10px;
   right:10px;
   -moz-border-radius:100px / 10px;
   border-radius:100px / 10px;
}

Shadow 5

.s5:before {
   position: absolute;
   right: 80px;
   bottom: 5px;
   width: 100%;
   height: 37%;
   border-radius: 0 10% 0 0;
   z-index: -1;
   content: "";
   box-shadow: 86px 0 17px rgba(0,0,0,0.33);
   -webkit-transform: skew(-36deg);
   -moz-transform: skew(-36deg);
   -ms-transform: skew(-36deg);
   -o-transform: skew(-36deg);
   transform: skew(-36deg);
   -webkit-transform-origin: 0% 100%;
   -moz-transform-origin: 0% 100%;
   -ms-transform-origin: 0% 100%;
   -o-transform-origin: 0% 100%;
   transform-origin: 0% 100%;
}

Shadow 6

.s6 {
   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
.s6:before, .s6:after {
   content:"";
   position:absolute; 
   z-index:-1;
   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
   box-shadow:0 0 20px rgba(0,0,0,0.8);
   top:10px;
   bottom:10px;
   left:0;
   right:0;
   -moz-border-radius:100px / 10px;
   border-radius:100px / 10px;
} 
.s6:after {
   right:10px; 
   left:auto;
   -webkit-transform:skew(8deg) rotate(3deg); 
   -moz-transform:skew(8deg) rotate(3deg);     
   -ms-transform:skew(8deg) rotate(3deg);     
   -o-transform:skew(8deg) rotate(3deg); 
   transform:skew(8deg) rotate(3deg);
}

Shadow 7

.s7:before {
   z-index: -1;
   position: absolute;
   content: "";
   width: 98%;
   height: 96%;
   bottom: 0px;
   right: 0px;
   background: #eee;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
   -webkit-transform: skew(2deg,2deg) translate(3px,5px);
   -moz-transform: skew(2deg,2deg) translate(3px,5px);
   -ms-transform: skew(2deg,2deg) translate(3px,5px);
   -o-transform: skew(2deg,2deg) translate(3px,5px);
   transform: skew(2deg,2deg) translate(3px,5px);
}
.s7:after {
   z-index: -1;
   position: absolute;
   content: "";
   width: 98%;
   height: 96%;
   bottom: 0px;
   right: 0px;
   background: #eee;
   border: 1px solid #ccc;
   box-shadow: 0 0 8px rgba(0,0,0,0.1);
   -webkit-transform: skew(2deg,2deg) translate(1px,0px);
   -moz-transform: skew(2deg,2deg) translate(1px,0px);
   -ms-transform: skew(2deg,2deg) translate(1px,0px);
   -o-transform: skew(2deg,2deg) translate(1px,0px);
   transform: skew(2deg,2deg) translate(1px,0px);
}

Shadow 8

.s8:before, .s8: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);
}
.s8:after {
   -webkit-transform: rotate(8deg);
   -moz-transform: rotate(8deg);
   -o-transform: rotate(8deg);
   -ms-transform: rotate(8deg);
   transform: rotate(8deg);
   right: 10px;
   left: auto;
}

Shadow 9

.s9:before, .s9: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);
}
.s9:after {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

Shadow 10

.s10:after {
   z-index: -1;
   position: absolute;
   content: "";
   bottom: 15px;
   right: 10px;
   left: auto;
   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);
}