Membuat Gradient Color Animasi Pada Backround Dengan Css

Membuat Gradient Color Animasi Pada Backround Dengan CSS - Sepertinya kini sudah banyak teman blogger yang memakai background dan teks dengan gradient color atau gradasi warna pada blog.

Nah, bagi Anda yang belum menggunkan gradient color dan ingin mencoba pada blog Anda, disini Saya akan coba menciptakan Gradient Color dengan animasi. Dengan memakai animasi gradien color, maka warna akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.

Sebelumnya Saya sudah posting Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS Kali ini Saya akan Coba posting Membuat Gradient Color Animasi Pada Backround Dengan CSS.

Jika Anda berminat untuk memasangnya pada blog Anda, mari kita ikuti caranya beeikut ini.

Disini aku contohkan untuk menciptakan gradient warna pada background header, maka cari CSS #header-wrapper pada edit HYML di template blog Anda, kalau sudah ketemu, biasanya CSS akan tampak atau menyerupai mirip dibawah ini.

  #header-wrapper {
  background:#fff; 
  max-width: 1000px;
  margin: 0 auto;

position: relative;
}
Silahkan hapus instruksi background:#fff dan ganti dengan CSS gradient color animasi dibawah ini.

 background:linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Makara CSS selengkapnya akan tampak menyerupai dibawah ini.

  #header-wrapper {
  background:linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}; 
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
 }

Anda juga dapat mengganti warna backgrondnya dengan mengganti instruksi warna #EE7752, #E73C7E, #23A6D5, #23D5AB dengan warna kesukaan Anda.
Kemudian Simpan template, dan lihat hasilnya.

Share this Article