<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.