Animated background
Animated CSS background gradients
Here’s a simple, fast way to make a pure CSS animated background gradient. Of course, this could be overdone so apply it sparingly and carefully choose your color selection.
Pure CSS Gradient Background Animation
— Pen by Manuel Pinto —
<section class="my-body">
<div class="d-flex">
<h1 >Pure CSS Gradient Background Animation</h1>
<a href="https://manuel.pinto.dev" >
<h5>— Pen by Manuel Pinto —</h5>
</a>
</div>
</div>
</section>
<style>
.my-body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
width: 100vw;
height: 50vh;
}
.d-flex {
display: grid;
place-items: center;
height: 100%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>