Is it possible to combine a linear-gradient and a radial-gradient in mask-image in CSS?

Question

I'm trying to create the following shape:

using the CSS -webkit-mask-image: property. What I have is:

body {
  background-image: url("https://picsum.photos/500");
    background-size: cover;
    background-repeat: no-repeat;
}

div {
  width: 500px;
  height: 500px;
  background: purple;
  -webkit-mask-image:
    radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%),
        linear-gradient(180deg, #000000 50%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 50%;
}

<div></div>

Is there any way to do this using just 1 div (no pseudo elements) and the -webkit-mask-image: property?

Answer 1

You can rely on mask-composite. You exclude a circle from the other mask layer

body {
  background-image: url("https://picsum.photos/500");
  background-size: cover;
  background-repeat: no-repeat;
}

div {
  width: 500px;
  height: 500px;
  background: purple;
  -webkit-mask-image: 
    /* adjust the 20% to control the radius of the circle */
    radial-gradient(circle at top, #000 20%, #0000 20.5%), 
    linear-gradient(#000 50%, #0000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

<div></div>