Demo: CSS mask-clip

<div class='masked-box'></div>

.masked-box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  mask-clip: border-box;
  mask-size: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-clip: border-box;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
}

// No JavaScript required for this demo