Today we have put together a small collection of 10 box shadows that you can use to give your images a bit more flair. The image shadows are created using the box-shadow property and with most examples we also use the :before and :after pseudo elements.
With all of the examples below, I have added a border with padding around the image to make the shadow stand out more, the CSS code used the the border is as follows:
.imgborder {
display:inline-block;
position:relative;
border:1px solid #ccc;
padding:5px;
background:#f2f2f2;
margin-bottom:30px;
}
Image 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);
}
Image 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);
}
Image 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);
}
Image 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;
}
Image 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%;
}
Image 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);
}
Image 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);
}
Image 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;
}
Image 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;
}
Image 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);
}All of the examples above are saved png images with the shadow, to view examples of the images with the CSS code applied, please check out the example page here.
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL