Using masks to cut a hole in the middle of an image

suggest change


div {
  width: 200px;
  height: 200px;
  background: url(;
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */


In the above example, a transparent circle is created at the center using radial-gradient and this is then used as a mask to produce the effect of a circle being cut out from the center of an image.

Image without mask:

Image with mask:

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents