Membuat Gradasi Warna Dengan CSS Linear / Radial Gradient

Gradient pada CSS3 memungkinkan Anda untuk menampilkan transisi halus antara dua atau lebih warna yang ditentukan. Hasilnya adalah objek dari tipe data
gradient, yang merupakan jenis khusus dari image. CSS3 mendefinisikan dua jenis gradient yaitu, Linear dan Radial.
Untuk membuat linear gradient, anda harus membuat setidaknya minimal dua warna, warna yang dimana anda inginkan untuk membuat transisi halus. Anda juga dapat mengatur titik awal dan arah atau sudut bersamaan dengan efek gradient.

Untuk contoh, lihat dibawah ini yaa guys, ehe

div { width:250px; height: 200px; background:-webkit-linear-gradient(blue,red); text-align:center; color:#fff; margin: 2%; }

Sintaks yang di atas berfungsi di Chrome dengan contoh penggunaan (-webkit). Kalau kalian menggunakan browser yang berbeda, tambahkan awalan yang sesuai dengan browser, sehingga browser kalian memahami dengen elemen gradien nya masing masing..
Firefox : -moz-
Chrome : -webkit-
Safari :: -webkit-
Opera : -o-
Interner Explorer : -ms
Hasil dari kode di atas :

Kalian dapat menggunakan nama warna, nilai Hex, RGB, atau HSL untuk menentukan warna gradien. Untuk contoh warna lengkapnya ada di W3.CSS Colors
Warna dapat di tambahkan satu demi satu, lalu di pisahkan dengan menggunakan koma. browser kemudian akan menentukan dimana posisi warna akan berhenti. Di bawah ini akan saya berikan contoh gradien linier yang memiliki beberapa warna dan berjalan dari atas ke bawah, seperti pelangi :D
Contoh sintaks

div { background:-webkit-linear-gradient(red,yellow,green,blue); }

berikut hasilnya

Arah gradien dapat anda ubah dengan sesuka hati. Pada contoh di bawah ini, gradien pertama dimulai dari kanan, bergerak ke kiri;
Contoh sintaks

div{ width:250px; height: 200px; background:-webkit-linear-gradient(right, red,yellow,green,blue); text-align:center; color:#fff; margin: 2%; }

berikut hasilnya

Kanan,kiri, atas maupun bawah adalah nilai yang didukung pada arah gradien. Kalian juga bisa menggunakan berbagai kombinasi untuk menentukan arahnya seperti (bottom right)

Cukup sekian tulisan saya kali ini, mohon maaf bila kurang jelas, karna saya juga masih dalam tahap pembelajaran :D mohon di koreksi bila ada kesalahan, Terima kasiih..