Contoh Lain Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML

Kali ini saya akan memberikan contoh lain dari gradasi warna beserta kode css dan html nya. Seperti apa kombinasinya?.. silahkan sobat lanjutkan bacanya..

Gradasi linear sederhana menggunakan dua warna akhir (Color stops)

Kode CSS

background:#408AD4;
background: -webkit-gradient(linear, left top, left bottom,from(#408AD4), to(#00264C));
background: -moz-linear-gradient(top,  #408AD4,  #00264C);

Kode HTML

<div style="background:#408AD4; background: -webkit-gradient(linear, left top, left bottom,from(#408AD4), to(#00264C)); background: -moz-linear-gradient(top,  #408AD4,  #00264C);">Contoh Lain Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>

Gradasi Linear menggunakan tiga color stops

Kode CSS

background: #01A2A6;
background: -webkit-gradient(linear, center top, center bottom,color-stop(0%, #FFFFA6), color-stop 50%, #BDF271), color-stop(100%, #01A2A6));
background: -moz-linear-gradient(top, #FFFFA6 0%, #BDF271 50%, #01A2A6 100%);

Kode HTML

<div style="background: #01A2A6; background: -webkit-gradient(linear, center top, center bottom,color-stop(0%, #FFFFA6), color-stop 50%, #BDF271), color-stop(100%, #01A2A6)); background: -moz-linear-gradient(top, #FFFFA6 0%, #BDF271 50%, #01A2A6 100%);">Contoh Lain Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>

Gradasi linear menggunakan derajat

Kode CSS

background: #043100;
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #FFF71A), color-stop(50%, #9CFF2C), color-stop(100%, #043100));
background: -moz-linear-gradient(left bottom 45deg, #FFF71A 0%, #9CFF2C 50%, #043100 100%);

Kode HTML

<div style="background: #043100; background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #FFF71A), color-stop(50%, #9CFF2C), color-stop(100%, #043100)); background: -moz-linear-gradient(left bottom 45deg, #FFF71A 0%, #9CFF2C 50%, #043100 100%);">Contoh Lain Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>

Gradasi menggunakan sudut

Kode CSS

background: #648C02;
background: -webkit-gradient(linear, right center, left center, color-stop(0%, #648C02), color-stop(50%, #FFD300), color-stop(100%, #FF7000));
background: -moz-linear-gradient(right top 180deg, #648C02 0%, #FFD300 50%, #FF7000 100%);

Kode HTML

<div style="background: #648C02; background: -webkit-gradient(linear, right center, left center, color-stop(0%, #648C02), color-stop(50%, #FFD300), color-stop(100%, #FF7000)); background: -moz-linear-gradient(right top 180deg, #648C02 0%, #FFD300 50%, #FF7000 100%);">Contoh Lain Membuat Gradasi Warna Background Menggunakan Kode CSS dan HTML<br>
caramantabh.blogspot.com</div>

Silahkan dicoba. Semoga bermanfaat