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 paduan 3 buah warna. Tentu saja paduan warna ini bisa dibuat sesuai selera kita, dan sudut gradasinya juga bisa sesuai selera kita.
Teks Ini Ditampilkan Dengan Warna Gradasi
Untuk membuat seperti itu, silahkan gunakan kode CSS berikut ini:
.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}Silahkan ganti background yang saya tandai di atas sesuai dengan gradasi yang diinginkan.
Kemudian tambahkan class
gradient-text pada tag yang ingin dibuat gradasi, sebagai contoh seperti kode di bawah ini.
<h3 class="gradient-text">Ini text yang dikasih gradasi warna</h3>Untuk mengganti background dengan gradasi warna yang kita inginkan silahkan gunakan tool gradasi warna berikut: http://www.colorzilla.com/gradient-editor/
Selesai, semoga bermanfaat...