svg mask on a gradient animation-CodePudding

Hello i tried out everything but don´t find the error.

I have a css gradient-animation running on my background and would like to put a mask over it. The mask consists of a circle in the centre of the screen. I would like that the animation running in the background is only visible inside the circle.

This is my code so far:

@charset "utf-8";

body {
margin: 0;
background: #ffffff;
overflow: hidden;
}

.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}

.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;    
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div >
      <div ></div>
  </div>

</body>
</html>

The animation is running fine but i don´t see the mask.

Thanks for any help.

CodePudding user response：

Something like this?

@charset "utf-8";

body {
margin: 0;
background: #ffffff;
overflow: hidden;
}

.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}

.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);  
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

 <div >
      <div ></div>
  </div>