css – How to make a transparent "hole" in a block with a background (background)?


The situation is such that there is a block with background , you need to make отверстие(прозрачное) in it so that you can observe what is behind the background.

Is there an implementation without embedding png svg and so on? I saw such an implementation, but did not understand how it was done

Are there any ideas?


You can try with the :after pseudo-element and a huge opaque shadow:

  #hole {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;

  #hole:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 0px 2000px #000;

  body {
    background: url('https://wallpaperbrowse.com/media/images/Wallpaper-1.png');
    background-size: cover;
	  <div id="hole" ></div>
Scroll to Top