Skip to main content

Membuat Gradasi Warna Teks Hanya Menggunakan CSS

Memberikan gradasi warna bukan hanya pada background saja, namun juga bisa diterapkan pada teks dengan teknik CSS saja. Sehingga dengan ini kita tidak perlu menggunakan gambar untuk menampilkan teks dengan gradasi warna.

Sehingga dengan hanya menggunakan CSS saja maka tidak akan membebani loading blog ketimbang menggunakan gambar yang sudah tentu dapat menambah loading pada blog.

Teknik CSS gradasi warna ini bisa kita terapkan pada judul blog, judul postingan, atau pada teks lainnya agar tampil berbeda dengan teks lainnya.

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...

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB