CSS linear-gradient() Fungsi
Contoh
Gradien linier ini dimulai dari atas. Mulai merah, transisi ke kuning, lalu ke biru:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Fungsi linear-gradient() menetapkan gradien linier sebagai gambar latar belakang.
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.
Contoh Gradien Linier:
| Versi: kapan: | CSS3 |
|---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi tersebut.
Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.
| Function | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Sintaks CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
| Value | Description |
|---|---|
| direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
| color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Lebih Banyak Contoh
Contoh
Gradien linier yang dimulai dari kiri. Mulai merah, transisi ke biru:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Contoh
Gradien linier yang dimulai dari kiri atas (dan menuju ke kanan bawah):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Contoh
Gradien linier dengan sudut tertentu:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Contoh
Gradien linier dengan beberapa perhentian warna:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Contoh
Gradien linier dengan transparansi:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Halaman Terkait
Tutorial CSS: Gradien CSS