CSS Конічні градієнти
CSS Конічні градієнти
A conic gradient is a gradient with color transitions rotated around a center point.
To create a conic gradient you must define at least two colors.
Синтаксис
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
By default, angle is 0deg and position is center.
If no degree is specified, the colors will be spread equally around the center point.
Конічний градієнт: три кольори
Наступний приклад відображає конічний градієнт з трьома кольорами:
Приклад
Конічний градієнт з трьома кольорами:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Спробуйте самі »
Конічний градієнт: П’ять кольорів
Наступний приклад відображає конічний градієнт з п’ятьма кольорами:
Приклад
Конічний градієнт з п’ятьма кольорами:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Спробуйте самі »
Конічний градієнт: Три кольори та градуси
The following example shows a conic gradient with three colors and a degree for each color:
Приклад
A conic gradient with three colors and a degree for each color:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
Спробуйте самі »
Create Pie Charts
Just add border-radius: 50% to make the conic gradient look like a pie:
Приклад
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
Спробуйте самі »
Here is another pie chart with defined degrees for all the colors:
Приклад
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Спробуйте самі »
Конічний градієнт With Specified From Angle
The [from angle] specifies an angle that the entire conic gradient is rotated by.
The following example shows a conic gradient with a from angle of 90deg:
Приклад
A conic gradient with a from angle:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
Спробуйте самі »
Конічний градієнт With Specified Center Position
The [at position] specifies the center of the conic gradient.
The following example shows a conic gradient with a center position of 60% 45%:
Приклад
A conic gradient with a specified center position:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Спробуйте самі »
Конічний градієнт, що повторюється
The repeating-conic-gradient() function is used to repeat conic gradients:
Приклад
Конічний градієнт, що повторюється:
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Спробуйте самі »
Here is a repeating conic gradient with defined color-starts and color-stops:
Приклад
A repeating conic gradient with defined color-starts and color-stops:
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Спробуйте самі »
CSS Функції градієнта
Наступна таблиця містить список функцій CSS градієнта:
| Функція | Опис |
|---|---|
| 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 |
