<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

img {
  max-width: 100%;
}

div{
  background: url('https://bennettfeely.com/clippy/pics/pittsburgh.jpg'), linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  background-blend-mode: overlay, luminosity, screen, luminosity;
  background-size: cover;
  
  &:nth-child(1) img{
    clip-path: ellipse(30%);
  }
  &:nth-child(2) img{
    clip-path: ellipse(50% 20%);
  }
  
  &:nth-child(3) img{
    clip-path: ellipse(closest-side);
  }
  &:nth-child(4) img{
    clip-path: ellipse(farthest-side);
  }
  
  &:nth-child(5) img{
    clip-path: ellipse(closest-side at 30%);
  }
  &:nth-child(6) img{
    clip-path: ellipse(farthest-side at 20% 50%);
  }
  
  
  &:nth-child(7) img{
    clip-path: ellipse(30% at 30%);
  }
  &:nth-child(8) img{
    clip-path: ellipse(50% 100% at 50% 100%);
  }
  
  &:nth-child(9) img{
    clip-path: ellipse(100% 100% at left top);
  }
  &:nth-child(10) img{
    clip-path: ellipse(100% 100% at right bottom);
  }
  
}