Skip to content

Instantly share code, notes, and snippets.

@arnoldc
Created June 23, 2013 11:59
Show Gist options
  • Save arnoldc/5844770 to your computer and use it in GitHub Desktop.
Save arnoldc/5844770 to your computer and use it in GitHub Desktop.
css: inset shadow on img
.vignette {
-webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
line-height: 0; /* ensure no space between bottom */
display: inline-block; /* don't go wider than image */
}
.vignette img {
position: relative;
z-index: -1; /* position beneath */
}
/*
<div class="vignette">
<img src="http://1.bp.blogspot.com/-ou03DFGGjMY/TgNstGfyt_I/AAAAAAAAAOo/xyOqdHJNHY4/s1600/10.jpg" alt="">
</div>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment