Skip to main content

Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS

Setelah kemarin kita Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP. Kali ini kita akan Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS

Untuk membuat gradasi warna bukan hanya pada background saja, namun bisa juga kita terapkan pada teks dengan menggunakan CSS saja. Sehingga dengan cara ini kita tidak perlu lagi menggunakan gambar untuk menampilkan teks dengan gradasi warna.

Karena garadsi warna teks ini hanya menggunakan CSS saja, maka kita tidak perlu khawatir akan membebani loading blog kita, ketimbang menggunakan gambar yang tentu saja akan menambah loading pada blog.

Gradasi warna teks ini juga bisa kita terapkan pada judul blog, judul postingan, tag h1, h2, h3, h4, h5, atau h6 atau pada teks lain yang ingin kita buat agar memiliki tampilan yang 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.
Baca juga Membuat Gradient Color Animasi Pada Backround Dengan CSS

Contoh Teks Dengan Warna Gradasi, Keren kan?


Nah, jika Anda ingin menggunakan Teks Gradasi Warna pada blog Anda, 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 Anda inginkan.

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>

Selesai. Nah, itulah postingan kali ini tentang Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS. Semoga bermanfaat...

Sumber: https://www.kompiajaib.com/2018/03/membuat-gradasi-warna-teks-hanya.html

You Might Also Like:

Buka Komentar