Vignetting an image in CSS

index.html

<div class="image-container">
    <img src="myimage.jpg" />
</div>

style.css

.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;
}