Gradien Kerucut CSS
Gradien Kerucut CSS
Gradien kerucut adalah gradien dengan transisi warna yang diputar di sekitar titik pusat.
Untuk membuat gradien kerucut, Anda harus menentukan setidaknya dua warna.
Sintaksis
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Secara default, sudutnya adalah 0 derajat dan posisinya adalah pusat.
Jika tidak ada derajat yang ditentukan, warna akan tersebar merata di sekitar titik tengah.
Gradien Kerucut: Tiga Warna
Contoh berikut menunjukkan gradien kerucut dengan tiga warna:
Contoh
Gradien kerucut dengan tiga warna:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Gradien Kerucut: Lima Warna
Contoh berikut menunjukkan gradien kerucut dengan lima warna:
Contoh
Gradien kerucut dengan lima warna:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Gradien Kerucut: Tiga Warna dan Derajat
Contoh berikut menunjukkan gradien kerucut dengan tiga warna dan derajat untuk setiap warna:
Contoh
Gradien kerucut dengan tiga warna dan derajat untuk setiap warna:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Buat Diagram Pai
Tambahkan saja border-radius: 50%untuk membuat gradien kerucut terlihat seperti kue:
Contoh
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Berikut adalah diagram lingkaran lain dengan derajat yang ditentukan untuk semua warna:
Contoh
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Gradien Kerucut Dengan Ditentukan Dari Sudut
[dari sudut ] menentukan sudut di mana seluruh gradien kerucut diputar.
Contoh berikut menunjukkan gradien kerucut dengan sudut 90 derajat:
Contoh
Gradien kerucut dengan sudut dari:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Gradien Kerucut Dengan Posisi Pusat Tertentu
[di posisi ] menentukan pusat gradien kerucut.
Contoh berikut menunjukkan gradien kerucut dengan posisi tengah 60% 45%:
Contoh
Gradien kerucut dengan posisi tengah tertentu:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Mengulangi Gradien Kerucut
Fungsi repeating-conic-gradient()ini digunakan untuk mengulang gradien kerucut:
Contoh
Gradien kerucut berulang:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Berikut adalah gradien kerucut berulang dengan permulaan warna dan penghentian warna yang ditentukan:
Contoh
Gradien kerucut berulang dengan permulaan warna dan penghentian warna yang ditentukan:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Fungsi Gradien CSS
Tabel berikut mencantumkan fungsi gradien CSS:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |