Membuat Gradasi Warna Teks Hanya Memakai Css

Teks dengan warna gradasi dapat 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 pola di bawah ini aku buatkan teks dengan warna gradasi dengan paduan 3 buah warna. Tentu saja paduan warna ini dapat dibentuk sesuai selera kita, dan sudut gradasinya juga dapat sesuai selera kita.

Teks Ini Ditampilkan Dengan Warna Gradasi

Untuk menciptakan menyerupai itu, silahkan gunakan arahan 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 aku tandai di atas sesuai dengan gradasi yang diinginkan.

Kemudian tambahkan class gradient-text pada tag yang ingin dibentuk gradasi, sebagai pola menyerupai arahan 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, biar bermanfaat...


Sumber https://www.kompiajaib.com/

Share this post