Add circular fading opacity (vignette effect) to images in CSS

Ok, so what we can do is create a :after element that will be equal to the size of the parent. Using this we can set a background gradient that will make it appear as the image is fading into the solid colour background.

Note: In this example I have made the gradient element a little bigger and moved it over 1px to stop a border from appearing around it. From here you can mess around to get the perfect effect that you want.

.circle {
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.circle img {
    border-radius: 50%;
    display: block;
    border:1px solid #fff;
}
.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
}

<div class="circle">
    <img src="http://placekitten.com/200/200?image=2" />
</div>

Edit: Here is another version without setting a height or width and getting rid of the border that gets caused if using 100% of parent. As Vucko pointed out we don’t need the negative values for the position but can use a border around the img instead.

JsFiddle Here