Функция CSS conic-gradient()
В коническом градиенте цвета вращаются вокруг центральной точки.
Функция CSS conic-gradient() создаёт такой градиент, и ей нужно как минимум два цвета.
Синтаксис конического градиента
Если их не указать, угол принимает значение 0deg, а положение — center.
Цвета без указанного градуса распределяются равномерно вокруг центральной точки.
styles.css
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
Конический градиент: три цвета
В следующем примере создаётся градиент из трёх цветов.
Пример
Красный, жёлтый и зелёный делят круг поровну:
Prompt
Создайте страницу с div, использующим конический градиент с тремя цветами: красный, жёлтый и зелёный. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors</h2>
<div id="grad"></div>
</body>
</html>
Конический градиент: пять цветов
Другие цвета добавляются точно так же, и в этом градиенте их пять.
Пример
Красный, жёлтый, зелёный, синий и чёрный вокруг одной центральной точки:
Prompt
Создайте страницу с div, использующим конический градиент с пятью цветами: красный, жёлтый, зелёный, синий и чёрный. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Five Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h2>Conic Gradient - Five Colors</h2>
<div id="grad"></div>
</body>
</html>
Конический градиент: три цвета и градусы
Каждый из трёх цветов ниже также имеет свой градус.
Пример
Здесь красному задано 45deg, жёлтому 90deg, а зелёному 210deg:
Prompt
Создайте страницу с div, использующим конический градиент с тремя цветами на определённых градусах: красный на 45deg, жёлтый на 90deg и зелёный на 210deg. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors and Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors and Degrees</h2>
<div id="grad"></div>
</body>
</html>
Создание круговых диаграмм
Чтобы конический градиент выглядел как круговая диаграмма, достаточно добавить border-radius: 50%.
Базовая круговая диаграмма
Prompt
Создайте страницу с div, использующим конический градиент с пятью цветами (красный, жёлтый, зелёный, синий, чёрный) и border-radius 50%, чтобы он выглядел как круговая диаграмма. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Круговая диаграмма с заданными градусами
Все цвета в этой второй круговой диаграмме имеют заданные градусы:
Prompt
Создайте страницу с div, использующим конический градиент с заданными цветовыми точками для создания круговой диаграммы из четырёх секций: красный 0-90deg, жёлтый 90-180deg, зелёный 180-270deg, синий 270-360deg. Используйте border-radius 50%. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Defined Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Defined Degrees</h2>
<div id="grad"></div>
</body>
</html>
Конический градиент с заданным начальным углом
Чтобы повернуть весь конический градиент на некоторый угол, заполните [from angle].
Пример
Здесь весь градиент повёрнут на начальный угол 90deg:
Prompt
Создайте страницу с div, использующим конический градиент, начинающийся с 90 градусов, с тремя цветами: красный, жёлтый и зелёный. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - From Angle</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(from 90deg, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - From Angle</h2>
<div id="grad"></div>
</body>
</html>
Конический градиент с заданным положением центра
За перемещение центра конического градиента отвечает [at position].
Пример
Здесь положение центра смещено на 60% 45%:
Prompt
Создайте страницу с div, использующим конический градиент с положением центра 60% 45%, с тремя цветами: красный, жёлтый и зелёный. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Center Position</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Center Position</h2>
<div id="grad"></div>
</body>
</html>
Функция CSS repeating-conic-gradient()
Когда конический градиент должен повторяться, используйте функцию CSS repeating-conic-gradient().
Базовый повторяющийся градиент
Красный и жёлтый, повторяющиеся вокруг центра:
Prompt
Создайте страницу с div, использующим повторяющийся конический градиент с красным на 10% и жёлтым на 20%, с border-radius 50%. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Повторяющийся градиент с цветовыми точками
Для каждого цвета в этом повторяющемся градиенте заданы начало и конец цвета:
Prompt
Создайте страницу с div, использующим повторяющийся конический градиент с заданными началами и концами цветов: красный 0deg 10deg, жёлтый 10deg 20deg, синий 20deg 30deg. Используйте border-radius 50%. Div должен быть размером 200px на 200px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient with Color Stops</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient with Color Stops</h2>
<div id="grad"></div>
</body>
</html>
Функции градиента CSS
Вот все функции градиента CSS и то, что делает каждая из них:
conic-gradient()- Создаёт конический градиент вокруг центральной точки. Нужно как минимум два цвета.linear-gradient()- Создаёт линейный градиент сверху вниз. Нужно как минимум два цвета.radial-gradient()- Создаёт радиальный градиент от центра к краям. Нужно как минимум два цвета.repeating-conic-gradient()- Заставляет конический градиент повторяться.repeating-linear-gradient()- Заставляет линейный градиент повторяться.repeating-radial-gradient()- Заставляет радиальный градиент повторяться.