Gradien CSS
Gradien CSS memungkinkan Anda menampilkan transisi yang mulus antara dua atau lebih warna yang ditentukan.
CSS mendefinisikan tiga jenis gradien:
- Gradien Linear (turun/atas/kiri/kanan/diagonal)
- Gradien Radial (ditentukan oleh pusatnya)
- Gradien Kerucut (diputar di sekitar titik pusat)
Gradien Linear CSS
Untuk membuat gradien linier, Anda harus menentukan setidaknya dua perhentian warna. Perhentian warna adalah warna yang Anda inginkan untuk membuat transisi yang mulus. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
Sintaksis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Arah - Atas ke Bawah (ini default)
Contoh berikut menunjukkan gradien linier yang dimulai dari atas. Mulai merah, transisi ke kuning:
Contoh
#grad {
background-image: linear-gradient(red, yellow);
}
Arah - Kiri ke Kanan
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Mulai merah, transisi ke kuning:
Contoh
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Arah - Diagonal
Anda dapat membuat gradien secara diagonal dengan menentukan posisi awal horizontal dan vertikal.
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri atas (dan menuju ke kanan bawah). Mulai merah, transisi ke kuning:
Contoh
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Menggunakan Sudut
Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, alih-alih arah yang telah ditentukan sebelumnya (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll.). Nilai 0deg setara dengan "ke atas". Nilai 90 derajat setara dengan "ke kanan". Nilai 180 derajat setara dengan "ke bawah".
Sintaksis
background-image: linear-gradient(angle, color-stop1, color-stop2);
Contoh berikut menunjukkan cara menggunakan sudut pada gradien linier:
Contoh
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Menggunakan Beberapa Warna Berhenti
Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa perhentian warna:
Contoh
#grad {
background-image: linear-gradient(red, yellow, green);
}
Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:
Contoh
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Menggunakan Transparansi
Gradien CSS juga mendukung transparansi, yang dapat digunakan untuk membuat efek fading.
Untuk menambahkan transparansi, kami menggunakan fungsi rgba() untuk menentukan perhentian warna. Parameter terakhir dalam fungsi rgba() dapat berupa nilai dari 0 hingga 1, dan ini mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan warna penuh (tanpa transparansi).
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Ini mulai sepenuhnya transparan, beralih ke warna merah penuh:
Contoh
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Mengulangi gradien linier
Fungsi repeating-linear-gradient() digunakan untuk mengulang gradien linier:
Contoh
Gradien linier berulang:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}