Gradient Background Animation - Tailwind Template
This background animation built using tailwindcss with some css customization.
background
Loading component...
43 lines
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap"
rel="stylesheet"
/>
<div
class="
w-full
h-screen
bg-gradient-to-r
from-pink-500
via-red-500
to-yellow-500
background-animate
"
></div>
<style>
body {
font-family: "Inter", sans-serif;
}
.background-animate {
background-size: 400%;
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
@keyframes AnimationName {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
</style>