Cara Memberikan Gradiasi Warna Pada CSS3

Sebagai contoh saya sudah punya HTML sederhana seperti berikut dimana didalamnya bodynya ada sebuah elemen <div> kosong yang saya sudah berikan style sederhana lebar 300px tingginya 200px dan saya simpan ditengah-tengah dan misalnya saya berikan backgorund-color lalu kita lihat hasilnya akan ada warna background disana. Jadi sekarang kita akan coba berikan warna gradiasi pada kotak tersebut. Caranya adalah kita mengganti property background-color dengan background image lalu valuenya kita tulis linear-gradient

gunakan kurung buka tutupnya lalu didalamnya bisa kita kasih beberapa value. Value yang paling sederhana adalah kita kasih warna awalnya mau apa dan warna akhirnya seperti apa. Misalnya warna awalnya saya kasih salmon sedangkan warna akhir saya berikan warna yellow sebagai berikut

kita lihat hasilnya dibrowser maka hasilnya

jadi setengahnya akan menjadi warna merah tua dan setengahnya warnanya kuning. Jadi sintak sederhananya seperti berikut

untuk warnanya bisa gunakan nama, rgb, atau kode hexa. Misalnya saya ingin lebih dari dua warna mudah saja jadi teman teman tambahkan koma lalu warna yang akan diberikan. Kita coba berikan seperti berikut

jadi teman teman bisa berikan warna warna sesuai dengan keinginan teman teman. Itu dulu penjelasan dari pemberian warna gradiasi pada CSS3. Sampai jumpa pada bagian berikut terima kasih.