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. Mempercantik Tampilan Code Snippets Dengan CSS
  2. Source Code Main Remi Bersama Top Komentator
  3. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  4. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  5. Yesterday, The Beatles
  6. Tips dan Tricks CSS (Cascading Style Sheets)
  7. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  8. Custom CSS Per Post
  9. Bypass Template Path dan Stylesheet Path
  10. Modifikasi Tampilan Halaman Daftar Isi
  1. 11-2-2017 at 08:13 | #1

    mantap bos ilmunya, terimakasih atas ilmunya, semoga bernmanfaat

    Reply

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