Online Web Tutorial

Membuat Text Link Warna Gradient

Membuat Text Link Warna Gradient - FSodic Gradient Illustration

FSodic.ID - Halo mblo, gimana wifi tetangga lancar? Pie passwordnya udah diganti Posting kali ini saya sedikit membahas tentang css gradient. Nah mungkin diantara kalian sudah banyak yang tahu cara membuat background gradient. Tapi pernahkah kalian membuat text-nya menjadi warna gradient. Langsung simak saja tutorialnya!

1. HTML
Kita akan mengubah link dengan id btnGradient sehingga silahkan disiapkan dahulu htmlnya seperti ini:

<a href="https://www.fsodic.id" id="btnGradient">www.fsodic.id</a>

2. CSS
Lanjut ke css-nya:

a#btnGradient{
  background: linear-gradient(90deg, #000, #f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Demo:
www.fsodic.id

Pie, bagus kan?

Perlu diingat, -webkit-text-fill-color tidak semua browser menudukung properti ini sehingga sangat disarankan untuk menghindari hanya menggunakan properti ini selain ada tambahan properti lain seperti warna dll.

MDN:
Lihat Browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color

Oke mblo cukup sekian posting kali ini, jangan lupa amankan password wifi tetangga ya