Skip to content

Instantly share code, notes, and snippets.

Created Feb 24, 2015
What would you like to do?
Vignetting an image in CSS
<div class="image-container">
<img src="myimage.jpg" />
.image-container {
width: 640px;
position: relative;
/* Remove the parts of the circle that is outside of the image */
overflow: hidden;
.image-container:after {
content: '';
position: absolute;
/* Center element on the middle of it's parent */
top: 50%;
left: 50%;
/* Reset back the image so it's center is locked on the center of the parent */
transform: translate(-50%,-50%);
/* Only set the width of the image */
width: 120%;
/* Using the padding trick, we force the elments padding bottom to push down the height */
/* To form a square, the padding-bottom, needs to have the same value as the width property */
padding-bottom: 120%;
box-shadow: inset 0px 0px 150px 60px rgba(0,0,0,0.8);
border-radius: 50%;
.image-container img {
max-width: 100%;
display: block;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment