Latar Belakang Gradasi Animasi

Latar belakang gradasi beranimasi yang memukau dengan transisi warna yang halus, diimplementasikan sepenuhnya murni menggunakan CSS. Efek ini menciptakan perubahan warna yang mengalir secara dinamis dengan menggeser posisi latar belakang memanfaatkan animasi keyframe.

Kode Implementasi

Silakan salin dan gunakan kode di bawah ini untuk proyek Anda.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Penjelasan Kode

Terdapat dua poin penting dalam implementasi latar belakang animasi ini:

1. background-size: 400% 400%: Memperbesar ukuran gradasi hingga 4 kali lipat dari ukuran elemen, sehingga meluas hingga ke luar area pandang.
2. @keyframes gradient-flow: Menggeser background-position secara mulus dari 0% ke 100%, lalu kembali ke 0%. Hal ini menciptakan ilusi optik gradasi yang meluas dan tampak bergerak seraya warnanya bertransisi.

Anda dapat menyesuaikan gaya ini dengan tema situs Anda melalui modifikasi palet warna pada linear-gradient serta durasi (dalam hitungan detik) pada properti animation.