Home » CSS » Membuat Text Gradient Dengan CSS

Membuat Text Gradient Dengan CSS

13 Oct. 201058 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. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  2. Tips dan Tricks CSS (Cascading Style Sheets)
  3. CSS3 Animation, Zoom In Zoom Out, Rotation
  4. Yesterday, The Beatles
  5. Modifikasi Tampilan Halaman Daftar Isi
  6. Cara Mengganti Background Theme WordPress
  7. Cara Mengganti Font Dalam Postingan
  8. Mempercantik Tampilan Code Snippets Dengan CSS
  9. Custom CSS Per Post
  10. Border Style, Border Width, Border Color
  1. 14-10-2010 at 13:55 | #1

    ijin tanya dulu, di atas ada penjelasan untuk safari dan chrome
    kalau mozilla gimana mas

    Reply

    Alwi Reply:

    Untuk Firefox cara menampilkan gradasi pada text atau font atau text gradient masih memerlukan bantuan sebuah gambar format PNG semi transparan, di postingan berikutnya insya Allah akan saya bahas.

    Reply

  2. 15-10-2010 at 08:40 | #2

    weeeh….tambah nyuuusss dah :mrgreen:

    Pagi Om :lol:

    Reply

  3. 15-10-2010 at 09:40 | #3

    ini saya pake chrome mas..
    wahh kereeennn bs gradient colorr

    Reply

    Barcode Printer Reply:

    saya juga pake chrome enaq dah

    Reply

  4. 15-10-2010 at 09:45 | #4

    dicoba dlu om buatnya.. sambil dipelajari

    Reply

    Hybrid car Reply:

    dicoba deh mas finical… hehe…

    Reply

    Barcode Printer Reply:

    mulai belajar lagi hari ini disini di blog ilmu web

    Reply

  5. 15-10-2010 at 10:56 | #5

    ditinggal empat hari….ternyata masih ada di posisi aman… :D

    Reply

  6. 15-10-2010 at 10:58 | #6

    setelah text stroke, ijin mencoba yang gradient text bung….

    Reply

  7. 15-10-2010 at 20:21 | #7

    It’s the very thing i want to catch. Thanks!
    This is the wonderful thing i spend long time to find it.

    Reply

    Hybrid car Reply:

    Nice to meet you sir….

    Reply

  8. 16-10-2010 at 12:19 | #8

    Belajar tiada henti dengan tips dan trik nge blog

    Reply

    Hybrid car Reply:

    iya sob…tetap semangat… !

    Reply

  9. 22-10-2010 at 09:25 | #9

    Very good!! thanks ya

    Reply

  10. 28-6-2012 at 19:36 | #10

    sekarang saya menggunakan OS Google Chrome dan demo artikel kali ini ttg gradient nampak menawan :)

    Reply

Comment pages
1 22080
1+9=? (Wajib diisi)