Create an image circle mask using CSS radial gradients

Sure, we could just do this in photoshop, and call it a day, but what happens when we need to update the image? It’s much easier to leave photoshop out of this, and use a css radial gradient.

HTML

  <div class="container">
    <img src="http://placehold.it/249x195" />
    <div class="mask"></div>
  </div>

CSS

.container {
  position: relative;
  width: 249px;
}

.mask {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  height: 195px;
  width: 100%;
  background: radial-gradient(circle, transparent 81px, white 81px);
}

View the demo on CodePen