Membuat Background Gradasi Warna Bergerak (Gradient Color Animation Pure CSS)

Belakangan ini lagi rame pemakaian background gradient color animation CSS di blog ya kalo saya liat. Kebetulan ada beberapa orang yang nanya cara bikinnya (padahal saya nggak pake). Daripada dijawab satu-satu, mending langsung dibikin tutorialnya. Caranya surprisingly simple karena hanya dibuat menggunakan CSS aja. Yap, kita nggak butuh Javascript segala karena CSS udah bisa melakukan animasi sederhana.

Cara ini bisa diterapkan untuk semua platform blog, seperti Blogger, WordPress, dan sebagainya. Tinggal tambahkan kode ke tempat pengaturan masing-masing.


1. CSS

Ini dia kunci utamanya. CSS berfungsi untuk mengatur warna-warna apa aja yang dipakai, yang nantinya akan digabungkan menjadi gradasi. Kemudian, gradasi itu ditambahkan sedikit animasi agar tampilannya lebih keren lagi.

Tambahkan kode CSS berikut di pengaturan HTML blog masing-masing.

.ignielPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: ignielGradient 12s ease infinite;
    -moz-animation: ignielGradient 12s ease infinite;
    animation: ignielGradient 12s ease infinite;
}
@-webkit-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

2. Penerapan Di Blog

Tinggal tambahkan class ignielPelangi ke elemen yang diinginkan.
Contoh kalau mau bikin efek gradasi warna bergerak di bagian header:

  1. Cari kode <div id='header'>
  2. Tambahkan class, sehingga hasilnya menjadi <div id='header' class='ignielPelangi'>
    <!-- SEBELUM -->
    <div id='header'>
      ...
    </div>

    <!-- SESUDAH -->
    <div id='header' class='ignielPelangi'>
      ...
    </div>

  3. Jika sudah ada class, tambahkan di belakang class sebelumnya.
    <!-- SEBELUM -->
    <div id='header' class='header'>
      ...
    </div>

    <!-- SESUDAH -->
    <div id='header' class='header ignielPelangi'>
      ...
    </div>

Jangan lupa cek CSS dari #header atau .header untuk memastikan apakah sudah ada value background atau belum. Karena kalau sudah, kode akan bentrok dan yang ditampilkan tetap CSS dari header awal.

Misalnya seperti ini:

#header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

/* ATAU */

.header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

HAPUS property background atau background-color karena akan digantikan oleh class ignielPelangi.


3. Demo / Preview

Backgroud dengan gradasi warna yang bergerak menggunakan animasi dari CSS
(by: igniel.com)

4. Penjelasan

Gradient color background dengan animasi bergerak CSS diatur dalam property background. Value-nya bisa kamu ubah sesuai keinginan. Berikut beberapa value yang bisa diganti:


4.1. Jenis Gradasi

Ada 2 jenis yang bisa dipakai, yaitu linear dan radient. Value yang diperlukan adalah linear-gradient (seperti contoh diatas) dan radial-gradient. Linear menciptakan efek bertingkat-tingkat, sementara radient menciptakan efek lingkaran dan elips. Saya nggak bakal terlalu jauh menjelaskan jenis radial, karena di tutorial ini hanya akan fokus ke jenis linear. Tapi saya sertakan contoh agar keliatan bedanya.

Contoh linear.

Contoh radial lingkaran. Sengaja nggak diperhalus biar lingkarannya keliatan jelas.

Contoh radial elips. Sengaja nggak diperhalus biar elipsnya keliatan jelas.


4.2. Tingkat Kemiringan

Kalau kamu perhatikan, warna yang tampil agak miring. Ini memang sengaja demi menciptakan efek yang lebih cantik. Dalam contoh, kemiringannya adalah 45 derajat yang ditandai dengan value 45deg.

Contoh kemiringan 45 derajat (45deg). Menciptakan efek diagonal.

Contoh kemiringan 90 derajat (90deg). Menciptakan efek vertikal.

Contoh kemiringan 180 derajat (180deg). Menciptakan efek horizontal.


4.3. Paduan Warna

Gradasi ini pada dasarnya adalah transisi atau peralihan warna yang sangat lembut dan halus. Karena itu, untuk menciptakan efek gradasi dibutuhkan minimal 2 warna (ya iyalah, kalau cuma 1 mau dialihkan ke warna apa). Dalam contoh, warna yang ditampilkan adalah #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f. Kamu bisa menambah atau mengurangi jumlahnya (minimal 2 warna), atau mengganti warnanya.

Contoh 7 warna (#f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f)

Contoh 2 warna (#fff, #000)

Contoh 1 warna (#f22613). Nggak terjadi gradasi dan warna nggak keluar karena diperlukan minimal 2 warna.


4.4. Lebar Background

Setelah efek gradasi tercipta melalui kode sebelumnya, maka kamu harus menentukan selebar apa background yang berisi warna gradasi tersebut akan muncul. Dalam contoh, lebarnya adalah 500% 500%. Semakin besar angkanya, maka gradasi akan semakin halus.

Contoh lebar backgroud 50% 50%

Contoh lebar backgroud 150% 150%

Contoh lebar backgroud 500% 500%


4.5. Animasi Bergerak

Nah ini dia yang bikin lebih menarik lagi. Animasi sederhana diperlukan untuk membuat gradasi warnanya bergerak. Pada contoh ditentukan oleh property -webkit-animation, -moz-animation, dan animation (wajib tulis semua agar mendukung banyak browser) dengan value ignielGradient 12s ease infinite. Kamu cukup ubah kecepatan animasinya aja, yaitu di value 12s. Yang lainnya nggak usah. Semakin kecil angkanya, maka semakin cepat gerakannya.

Contoh animasi 12 detik (12s).

Contoh animasi 3 detik (3s).

So that's it tutorial membuat animasi background gradient color CSS dari igniel.com. Semoga bisa bikin blog kamu semakin berwarna-warni. Pakenya jangan kelebihan ya, biar nggak alay.

Artikel Terkait

32 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Unknown
    21/3/21
    Profil: https://www.blogger.com/profile/18243516674587572232
    Gila keren kak thx ilmunya i loping2 yu
  • Nathasya Putri
    19/12/19
    Profil: https://www.blogger.com/profile/07766741479773097415
    19 Desember 2019.
    Thanks tutorialnya.berhasil kak
  • HENDY CHANNEL
    16/7/19
    Profil: https://www.blogger.com/profile/17217467645668688304
    saya menerapkan di template igniplex. header yang berubah di versi mobile. kalo bisa berubah di desktop gmn...
    • Igniel
      16/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
  • SEKODE
    27/2/19
    Profil: https://www.blogger.com/profile/06173903606956388704
    tempalte yang saya pake gak ada kode
    id='header'>

    adanya begini
    id='header-container'>





    0
    600
    false
    false
    BEHIND
    0



    sama
    id='header-inner'>
    class='titlewrapper' style='background: transparent'>
    class='title' style='background: transparent; border-width: 0px'>




  • Masdin
    17/2/19
    Profil: https://www.blogger.com/profile/16058590950201232857
    Mbak, cara buat header seperti blog ini caranya gimana Mbak ?

    Kalau mode desktop , bisa memanjang. Header, horizontal menu , dan kotak search

    Kalau mobile , berubah menjadi 1 baris berisi (icon search + blogtitle + garis3 menu).

    Cara nerapin di blogger bagaimana Mbak ?
  • rizky ana
    13/2/19
    Profil: https://www.blogger.com/profile/02410987768566879197
    buat tutorial cara agar background blogger tidak bisa bergerak saat discrool dong mbak
  • rizky ana
    7/2/19
    Profil: https://www.blogger.com/profile/04205793545656930800
    Mbak boleh minta nomor whatsappnya, soal saya mau tanya" tentang background animasi diheader navigasi,terima kasih,tolong
    • Igniel
      7/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hanya hubungi lewat halaman KONTAK di blog ini.
    • rizky ana
      12/2/19
      Profil: https://www.blogger.com/profile/02410987768566879197
      mbak untuk penerapan dimenu blogger bisa dijelaskan biasanya letaknya dimana??
  • Admin Filebas
    15/1/19
    Profil: https://www.blogger.com/profile/10787926302582551137
    Akhirnya dapat juga.. alhamdulillah... makasih sis..
  • Mas Lubis
    14/12/18
    Profil: https://www.blogger.com/profile/05564804998766544560
    Ini diterapkan untuk background meny navigasi kan ya?
    • Igniel
      14/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bebas mau dimana aja. Menu / button / footer bisa.
  • Essa
    3/12/18
    Profil: https://www.blogger.com/profile/03385518739444780345
    Mantap mbak work kodenya. Thanks ya
  • Anonim
    Anonim 14/11/18
    Great work
  • Gitaris Pemula
    13/11/18
    Profil: https://www.blogger.com/profile/15662743241402531732
    Kalo wana huruf (Contoh Title/Judul Blog) yang dibuat warna gradient dengan animasi bisa gak mba, saya semaleman otak atik gak berhasil
  • Admin Stres
    28/7/18
    Profil: https://www.blogger.com/profile/09630956341121839153
    cara bikin popular post begini . da gk tutorial nya ?
  • Riziq Maulana
    25/5/18
    Profil: https://www.blogger.com/profile/16154088041683809029
    Mba kode CSS di simpan di pengertian html ituh di mana ya? Apah di atas kode ]]> ? tolong di jawab mba.
    • Igniel
      25/5/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa diatas ]]></b:skin>

      Atau bisa juga diatas </style>
  • Zenny
    11/5/18
    Profil: https://www.blogger.com/profile/11077035248093956513
    Bikin berat template gk mba??
    • Igniel
      11/5/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak bikin berat sama sekali karena ini cuma kode CSS.

      Yang bikin berat blog biasanya adalah javascript.
  • KUBIS
    10/5/18
    Profil: https://www.blogger.com/profile/16491749488131368098
    maaf kak kq saya bingung masang di tamplate saya pake evo magz ga ada kode yang diatas kak. bisa bantu saya? baru belajar soalny. Trimakasih
    • Igniel
      10/5/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode mana yang nggak ada?
    • KUBIS
      26/5/18
      Profil: https://www.blogger.com/profile/16491749488131368098
      Kode yang kk sebutin paling atas tu, kak, jadi bingung sy pas mau nerapin di blog sy kk.. Bantu ya makasih
    • Igniel
      23/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Maksudnya kode <header> atau yang mana?
  • YZG
    8/5/18
    Profil: https://www.blogger.com/profile/10392984051799325805
    mantap, jadi bisa sekalian praktek ga hanya tinggal make aja.
  • Unknown
    7/5/18
    Profil: https://www.blogger.com/profile/10889081754278771307
    Pertamax mba
  • Namorz
    7/5/18
    Profil: https://www.blogger.com/profile/15209492589869286546
    Timingnya pas banget mba kwkwk
  • Yosep Eko Prambudi
    7/5/18
    Profil: https://www.blogger.com/profile/15649308474545496932
    nuhun neng tutorial na.
  • Muhamad Firmansyah
    7/5/18
    Profil: https://www.blogger.com/profile/03720375952292094589
    kalo untuk wordpress gimana?
    • Igniel
      7/5/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      1) Cari lokasi pengaturan CSS dan tambahkan kode diatas.
      2) Cari elemen HTML yang mau diubah dan tambahkan class 'ignielPelangi'
  • Unknown
    7/5/18
    Profil: https://www.blogger.com/profile/01558822405761557554
    Mantap mbak igniel :3