<div class="background">
<h1 class="title">Gradient Animation</h1>
</div>
@keyframes moveGradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.background {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(270deg, #4a90e2, #50e3c2, #9013fe, #f5a623);
background-size: 400% 400%;
animation: moveGradient 5s ease infinite;
font-family: Arial, sans-serif;
color: white;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.title {
font-size: 3rem;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.