Cara Membuat Gradasi Warna Pada Blog

Cara Membuat Gradasi Warna Pada Blog - Teks dengan warna gradasi bisa kita gunakan pada judul blog, judul postingan, tag h1, h2, h3, h4, h5, atau h6 atau pada teks lain yang ingin kita buat tampil berbeda dengan teks lainnya sehingga teks ini menjadi lebih berwarna.

\

Sebagai contoh di bawah ini saya buatkan teks dengan warna gradasi dengan perpaduan 3 warna. Tentu saja paduan warna ini bisa dibuat sesuai selera anda, dan sudut gradasinya juga bisa sesuai selera anda.

BloDroi Penuh Warna

Untuk membuat seperti di atas, cari kode

.gradient-text{
background:#EF5747;
background:-moz-linear-gradient(left,#EF5747 0,#61c419 50%,#0379B6 100%);
background:-webkit-linear-gradient(left,#EF5747 0,#61c419 50%,#0379B6 100%);
background:linear-gradient(to right,#EF5747 0,#61c419 50%,#0379B6 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#EF5747', endColorstr='#0379B6', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}

Silahkan ganti background yang tandai di atas sesuai dengan gradasi yang anda inginkan. Kemudian tambahkan class gradient-text pada tag yang ingin dibuat gradasi, sebagai contoh seperti kode di bawah ini.

 <h1 class="gradient-text">Ini text yang dikasih gradasi warna</h1>

Untuk mengganti background dengan gradasi warna yang kita inginkan silahkan gunakan tool gradasi warna berikut pada colorzilla. Semoga berhasil dan terima kasih.