Cara Membuat Text Gradient Menggunakan CSS

Dalam artikel kali ini saya mau bagikan cara membuat text Gradien menggunakan CSS. Nah, buat yang belum tahu apa itu gradient? akan saya jelaskan juga disini.

Gradien adalah perpaduan warna antara warna satu dengan warna yang lain. Karenanya, gradien linier dimulai dengan satu warna dan secara bertahap bertransisi dalam garis lurus ke warna lain. Gradien tidak memiliki ukuran baku (dimensi intrinsik). Ukuran gradien akan selalu cocok dengan ukuran elemen yang diterapkan.

Gradien Linier

fungsi CSS menciptakan sebuah gambar yang terdiri dari transisi progresif antara dua atau lebih warna sepanjang garis lurus. Hasilnya adalah objek dari gradient tipe data, yang merupakan jenis khusus (image), lihat MDN.

Contoh Gradient Linier

Sintaks dari gradien linier miring 45deg dengan warna awal merah dan warna akhir biru.

.gradient {

  background: linear-gradient(45deg, red, blue);

}

{getbutton} $text={css-demo Linier Gradient} $icon={preview} 

Kalian juga dapat membuat penghentian warna untuk membuat efek bergaris, contoh codenya seperti ini

.gradient {

  background: linear-gradient(

    to right,

    red 20%,

    orange 20% 40%,

    yellow 40% 60%,

    green 60% 80%,

    blue 80%

  );

} {codeBox}

Bagaimana Cara Menambahkan Gradien Linier Ke Teks

 Untuk membuat teks gradient kita bisa menggunakan 3 cara berikut:

#1. Membuat Gradien sebagai background

.gradient-text {

  background-image: linear-gradient(45deg, var(--red), var(--yellow));

} {codeBox}

#2. Clip Text Background

Properti CSS background-clip menyetel apakah latar belakang elemen meluas di bawah kotak perbatasan, kotak padding, atau kotak kontennya.

{getbutton} $text={Background-clip} $icon={preview}

.gradient-text {

  background-color: var(--red);

  background-image: linear-gradient(45deg, var(--red), var(--yellow));

  background-size: 100%;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

} {codeBox}

#3. Tambahkan fallback

Bayangkan semuanya akan sama-sama didukung di setiap browser? Nah, karena tidak ada dukungan penuh, kita harus menambahkan fallback.

.gradient-text {

  background-color: var(--red);

  background-image: linear-gradient(45deg, var(--red), var(--yellow));

  background-size: 100%;

  -webkit-background-clip: text;

  -moz-background-clip: text;

  -webkit-text-fill-color: transparent;

  -moz-text-fill-color: transparent;

} {codeBox}

 

Dengan fungsi CSS linear-gradient(), kita dengan mudah untuk menerapkan gradien linier ke div, dan background-clip kita juga bisa menyesuaikannya kedalam teks.

Dan itulah artikel Cara Membuat Text Gradient Menggunakan CSS semoga bisa bermanfaat, Terima kasih telah membaca dan jika kalian memiliki pertanyaan, silahkan tanyakan di kolom komentar