Fungsi gradien kerucut CSS ()
Contoh
Gradien kerucut dengan tiga warna:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Fungsi conic-gradient() menetapkan gradien kerucut sebagai gambar latar belakang.
Gradien kerucut adalah gradien dengan transisi warna yang diputar di sekitar titik pusat.
Untuk membuat gradien kerucut, Anda harus menentukan setidaknya dua perhentian warna.
Contoh Gradien Kerucut:
Versi: kapan: | CSS3 |
---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi tersebut.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
Sintaks CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | 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 degree between 0 and 360 or a percent between 0% and 100%). |
Lebih Banyak Contoh
Contoh
Gradien kerucut dengan lima warna:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
Contoh
Gradien kerucut dengan tiga warna dan derajat untuk setiap warna:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
Contoh
Buat gradien kerucut terlihat seperti kue dengan menambahkan radius batas: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Contoh
Gradien kerucut dengan sudut dari:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Contoh
Gradien kerucut dengan posisi di:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Contoh
Gradien kerucut dengan baik dari sudut dan pada posisi:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Contoh
Diagram lingkaran lainnya:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Halaman Terkait
Tutorial CSS: Gradien CSS