Membuat Text Gradient Dengan CSS

Kalau pada postingan sebelumnya sudah saya share tentang cara membuat efek text stroke dengan css, maka pada postingan ini izinkan saya mendokumentasikan hasil otak-atik menggunakan css lainnya, yakni tentang cara membuat efek gradient pada text. Tapi lagi-lagi cara ini hanya bisa ditampilkan dengan browser/peramban berbasis WebKit seperti Google Chrome dan Safari. Untuk yang gecko seperti Firefox kayaknya belum support, kalaupun bisa menampilkan text gradient harus dikombinasikan dengan sebuah gambar format png untuk memberikan efek gradasinya, atau mungkin ada yang tahu caranya? bisa tolong ajari saya, suerrr …!!! mumpung lagi getol-getolnya belajar CSS3.

Tidak berpanjang kalam, kita langsung ke TKP nyookkk …. dan ini hasil screenshortnya :

Untuk memberikan efek gradasi pada sebuah text/font bisa menggunakan kode seperti contoh berikut ini :

<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left top, left bottom, from( #00FF99), to( #000099)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>

Hasilnya akan seperti ini (harus menggunakan Google Chrome/Safari) :

TEXT GRADIENT

Contoh lainnya, kita juga bisa membuat efek gradasi seperti warna pelangi, contoh kodenya seperti ini :

<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(15%,orange), color-stop(30%,yellow), color-stop(45%,green), color-stop(60%,blue), color-stop(80%,#DA15CA), to(violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>

Hasilnya akan seperti ini :

TEXT GRADIENT

Contoh text gradient dengan efek stroke, kodenya adalah :

<div style="font-family: arial black; font-size: 63px; -webkit-text-stroke: 3px grey; background: -webkit-gradient(linear, left top, left bottom, from(#A50C1E), to(#DDBF18)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
TEKS ANDA DI SINI</div>

Hasilnya akan seperti ini :

TEXT GRADIENT

Contoh text gradient dengan shadow :

TEXT GRADIENT

Contoh text gradient dengan 3 warna gradasi, kodenya kira-kira seperti ini :

<div style="font-family: Georgia; font-size: 63px;font-weight:bold; -webkit-text-stroke: 2px grey; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#006e2e), color-stop(53%,#8f0222), color-stop(100%,#f1da36)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>

Hasilnya akan seperti ini :

TEXT GRADIENT

Efek gradasi di samping menggunakan tipe linear anda juga dapat menggunakan radial, angle dan lain-lain, silahkan berimprovisasi sesuka anda termasuk juga pemilihan warnanya.

Related Post