html:before {
  --s: 150px; /* the size */
  --g: 10px;  /* the gap */ 
  --r: 15px;  /* the radius */
  
  content: "";
  position: fixed;
  inset: var(--g);
  --_g: radial-gradient(var(--r) at var(--r) var(--r),#000 98%,#0000);
  --_o: calc(-2*var(--r) - var(--g));
  -webkit-mask:
    var(--_g),var(--_g) var(--_o) 0,var(--_g) 0 var(--_o),var(--_g) var(--_o) var(--_o),
    conic-gradient(at calc(var(--s) - 2*var(--r)) var(--s),#0000 75%,#000 0) var(--r) 0,
    conic-gradient(at var(--s) calc(var(--s) - 2*var(--r)),#0000 75%,#000 0) 0 var(--r);
  -webkit-mask-size: calc(var(--s) + var(--g)) calc(var(--s) + var(--g));
  background: linear-gradient(45deg, pink, skyblue);
}