Home » CSS » Membuat Text Gradient Dengan CSS

Membuat Text Gradient Dengan CSS

13 Oct. 201059 comments
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 :

CSS Text Gradient

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.

Mudah-mudahan artikel tentang Membuat Text Gradient Dengan CSS ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Menggulingkan Top Komentator
  2. Main Remi Bersama Top Komentator
  3. Cara Menggabungkan File CSS WordPress
  4. Modifikasi Tampilan Halaman Daftar Isi
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Cara Mengganti Font Dalam Postingan
  7. Border Style, Border Width, Border Color
  8. CSS3, Sonic Mengejar Bola
  9. Customisasi Tampilan Tag Cloud
  10. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  1. 11-2-2017 at 08:13 | #1

    mantap bos ilmunya, terimakasih atas ilmunya, semoga bernmanfaat

    Reply

Comment pages
1 2 32080
5+6=? (Wajib diisi)