Adding an Inset Shadow to an Image Using CSS3
by c.bavota | Posted in Tutorials | 16 comments
Yesterday PressWork launched a new theme in conjunction with Empire Avenue. The original design had a really nice shadow effect on the images and I wanted to make sure that I could code it using CSS3. The problem was, CSS3 inset shadows don’t work at all on images. The only way to get the effect to work is to use the ::before selector to add a container that can be positioned above the image.
This is how the HTML should look:
<a href="http://presswork.me/themes/socialstock/" class="img-shadow"><img src="http://presswork.me/wp-content/uploads/2011/09/socialstock_home.jpg" alt="" /></a>
That will display an image surrounded by an anchor tag.
Here is the CSS3 we need:
.img-shadow {
position: relative;
max-width: 100%;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.img-shadow img {
float: left;
}
Here is a live example:
The only concern anyone might have when using this effect is that the container must use the float style in order for it to work properly. If anyone can find a better solution please leave a comment below.
You can also take a look at the SocialStock theme demo to see it working on multiple images.
I have used this myself to make a inset shadow on the right and the bottom of the image. I have used following css:
(It is almost the same as you suggested)
#shadow {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}
This works fine for me.
Thanks for the code
Super helpful for my blog. Thanks so much! http://blog.likebright.com
thanks, but i have used:
border-color: #CCCCCC #AAAAAA #AAAAAA #CCCCCC;
border-radius: 3px 3px 3px 3px;
border-style: solid;
border-width: 1px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
That will give you a regular shadow on your image, but it will not give you an inset shadow like the example above.
Thanks for the tipps,
I’m currently struggling with this shadow thing in my project and was looking for some good ideas. I will try this and see if it works.
I was struggling with this problem myself. Thank you for this solution. I now use it myself but I don’t have a better solution to create this effect.
Hello nice post… Please help me were I must to insert this Css3 cod :
in style.css?
in the final of document????
It should go in the style.css or any file you are using as a stylesheet.
Thanks for this tutorial, I currently working on making our images look better and will use the shadow guide for that.
To be honst, i tried hard to add shadow to an image but failed but now happy got it and working prefectly.
good and working tips. thanks for all this, it saved my time.
I want to thank you for this very helpful post. I’ve been researching like crazy on how to get the shadow to appear on top of an image, but would have not imagined this creative solution on my own. Thanks for sharing it!
Thanks for this. I’ve been trying to get a shadow around a logo that I am creating. I was having the same trouble as you. The CSS3 inset shadows weren’t working on my image. I hadn’t thought of using the ::before selector to add a container. Awesome advice! Thanks!
Thanks for this. I was actually playing around with this the other day and this is just what I was trying to do.
BTW, I just happened to find my way here because I clicked through to your site from the Magazine Basic theme I’m using on a new site of mine (see my comment website). Loving how customizable it is. Nice work!