CSS gradients terbuat dari transisi progresif antara dua warna atau lebih.

Transition antara warna biasanya halus.

Ada dua jenis gradien CSS, mereka diwakili oleh hal-hal berikut

• Linear Gradient linear-gradient ()
• Radial Gradient radial-gradient ()

Gradient dapat digunakan di mana saja, seperti di latar belakang.

Untuk menunjukkan bagaimana gradien berfungsi, kami akan menggunakan latar belakang -Image properti CSS.

Linear Gradient Fungsi Linear-Gradient() CSS menciptakan gambar yang terdiri dari transisi progresif antara dua warna atau lebih sepanjang garis lurus.

Contoh:

background-image: linear-gradient(tujuan , warna1 , warna2);

• tujuan : arah gradasi warna yang kamu mau, contoh to bottom right
• warna1 : warna gradasi pertana, contoh pink
• warna2 : warna gradasi kedua, contoh red

Contoh: css

background-image: linear-gradient(to bottom right,pink, red );

Linear Gradient - Using Angles

Jika Anda membutuhkan lebih banyak kontrol atas arahnya, Anda dapat memberikan gradien sudut tertentu(#deg).

Contoh: css

background-image: linear-gradient(240deg, pink, red);

Linear Gradient - Multiple Color stop

Contoh di bawah ini menunjukkan gradien linear dengan lebih dari dua perhentian warna.

css

background-image: linear-gradient(red, yellow, green);

Linear Gradient - Creating Hard Lines

Untuk membuat garis keras antara dua warna hanya mengatur perhentian warna yang berdekatan ke posisi yang sama.

Kemudian membuat garis sebagai ganti transisi.

css

background-image: linear-gradient(to top right, lightblue 50%, pink 50%);