Cara membuat background gradient 2 warna

Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.

---

Background 1 warna dengan menggunakan warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan menggunakan warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada bagian atas bisa diganti dengan kode

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

Tweet