Using masks to cut a hole in the middle of an image
suggest changeCSS
div {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/200/200/abstract/6);
mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}
HTML
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:
![](/essential/css/img/0bde7d171f3abd39dce817c83563c95afceac085.png)
Image with mask:
![](/essential/css/img/4629ce91507efef24f84bc88f0a5d1665ca078b5.png)
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents