<div class="strato01"></div>
<div class="strato02"></div>
<div class="testo">HELLO</div>

@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');

:root {
  --grad01: radial-gradient( 
    circle farthest-corner at 10% 20%, 
    rgba(239,87,87,0.74) 0%, 
    rgba(245,123,13,0.74) 90.2% 
  );
    --grad02: radial-gradient( 
      circle farthest-corner at 0.8% 3.1%, 
      rgba(255,188,224,1) 0%,
      rgba(170,165,255,1) 46%,
      rgba(165,255,205,1) 100.2% 
    );
  --color01: #ffff00;
  --color02: #cc0000;
}

@keyframes moveGra {
  0% {
    opacity:1;
  }
  100% {
    opacity: 0;
  }
}

body {
  position:relative;
  background:#ffffff;
}

div {
  position:absolute;
  top:0;
  left:0;
  height:100vh;
  width:100%;
}

div.strato01 {
  background: var(--grad02);
}

div.strato02 {
  background: var(--grad01);
  animation: moveGra 4s ease-in-out infinite alternate;
}

.testo {
  position:relative;
  font-size:300px;
  margin:0;
  font-weight:bold;
  font-family: 'Passion One', cursive;
  text-align: center;
  background: #fff;
	color: #000;
  mix-blend-mode: lighten;
}