Dalam mendesain web tentunya sobat ingin menampilkan warna yang cantik dan enak untuk dilihat. Penggunaan gradasi warna tentunya pilihan yang tepat untuk memperindah warna background web/blog sobat. Gradasi warna yaitu warna yang terbentuk dari perpindahan antara warna satu ke warna lain. Warna gradasi dapat dikombinasikan antara dua warna atau lebih.
Berikut ini adalah beberapa contoh gradasi warna beserta kode css dan html nya :
background: #ff0000;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #ff0000 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff0000) );
<div style="background: #ff0000;background: -moz-linear-gradient( center top, #ffffff 20%, #ff0000 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff0000) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #ff9900;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #ff9900 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff9900) );
<div style="background: #ff9900;background: -moz-linear-gradient( center top, #ffffff 20%, #ff9900 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff9900) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #ffff00;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #ffff00 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ffff00) );
<div style="background: #ffff00;background: -moz-linear-gradient( center top, #ffffff 20%, #ffff00 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ffff00) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #00ff00;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #00ff00 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #00ff00) );
<div style="background: #00ff00;background: -moz-linear-gradient( center top, #ffffff 20%, #00ff00 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #00ff00) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #00ffff;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #00ffff 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #00ffff) );
<div style="background: #00ffff;background: -moz-linear-gradient( center top, #ffffff 20%, #00ffff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #00ffff) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #0000ff;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #0000ff 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #0000ff) );
<div style="background: #0000ff;background: -moz-linear-gradient( center top, #ffffff 20%, #0000ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #0000ff) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #9900ff;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #9900ff 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #9900ff) );
<div style="background: #9900ff;background: -moz-linear-gradient( center top, #ffffff 20%, #9900ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #9900ff) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #ff00ff;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #ff00ff 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff00ff) );
<div style="background: #ff00ff;background: -moz-linear-gradient( center top, #ffffff 20%, #ff00ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #ff00ff) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #000000;Kode HTML
background: -moz-linear-gradient( center top, #ffffff 20%, #000000 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #000000) );
<div style="background: #000000;background: -moz-linear-gradient( center top, #ffffff 20%, #000000 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #ffffff), color-stop(1, #000000) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
background: #ffffff;Kode HTML
background: -moz-linear-gradient( center top, #000000 100%, #ffffff 20% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #000000), color-stop(1, #ffffff) );
<div style="background: #FFFFFF;background: -moz-linear-gradient( center top, #000000 100%, #ffffff 20% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #000000), color-stop(1, #ffffff) );">Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>
Kombinasikan warna yang anda inginkan dan atur persentase warnanya.
Silahkan dicoba. Semoga bermanfaat.