Animated Gradient Background Html

MUAZHAN

4 min read

·

Jun 28, 2024

33

Share

Membuat Latar Belakang Gradien Animasi dengan HTML

Animasi latar belakang gradien bisa memberikan sentuhan dinamis dan menarik pada situs web Anda. Dengan menggunakan HTML dan sedikit CSS, Anda dapat dengan mudah membuat efek ini. Berikut langkah-langkahnya:

1. Buat Elemen HTML

Mulailah dengan membuat elemen HTML yang akan menjadi latar belakang Anda. Misalnya, Anda dapat menggunakan elemen <div>:

2. Tambahkan Style CSS

Selanjutnya, tambahkan style CSS untuk mengatur warna gradien dan animasi:

.background {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #ff0000, #ffff00);
  animation: gradient 5s ease infinite;
}

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

Penjelasan kode:

• .background: Menentukan style untuk elemen <div> dengan class "background".
• width: 100%; height: 100vh;: Mengatur lebar dan tinggi elemen agar memenuhi seluruh layar.
• background: linear-gradient(to right, #ff0000, #ffff00);: Menentukan gradien linear dengan arah dari kiri ke kanan, warna merah (#ff0000) dan kuning (#ffff00).
• animation: gradient 5s ease infinite;: Menentukan animasi dengan nama "gradient", durasi 5 detik, easing "ease", dan diulang tanpa henti.
• @keyframes gradient: Menentukan aturan animasi dengan nama "gradient".
• 0%, 50%, 100%: Menentukan poin-poin kunci dalam animasi (0%, 50%, dan 100% dari durasi).
• background-position: ...: Mengatur posisi gradien pada poin-poin kunci.

3. Modifikasi dan Kreativitas

Anda dapat dengan mudah memodifikasi kode di atas untuk mendapatkan efek yang berbeda:

• Ubah warna: Ganti warna merah dan kuning dengan warna lain sesuai keinginan.
• Ubah arah gradien: Ganti to right dengan to left, to top, to bottom, atau sudut lainnya.
• Tambahkan warna gradien: Tambahkan warna lain ke dalam gradien, misalnya: linear-gradient(to right, #ff0000, #ffff00, #0000ff).
• Ubah durasi dan easing: Sesuaikan durasi animasi dan easing dengan nilai yang Anda inginkan.
• Gunakan multiple background: Tambahkan beberapa gradien untuk efek yang lebih kompleks.
• Tambahkan efek lain: Gabungkan animasi gradien dengan efek lainnya, seperti transisi, blur, atau shadow.

Contoh Implementasi

Berikut contoh implementasi lengkap:

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah membuat latar belakang gradien animasi yang menarik dan dinamis untuk situs web Anda.