Функция conic-gradient в CSS. Полное руководство с примерами

Функция conic-gradient() в CSS позволяет создавать конические градиенты, которые представляют собой фоновое изображение из цветовых переходов, повёрнутых вокруг центральной точки. Эти градиенты создают визуально интересные эффекты, которые могут быть использованы для различных дизайнерских целей. В этой статье мы подробно рассмотрим, как использовать функцию conic-gradient(), и приведём примеры её применения.

Основы conic-gradient()

Функция conic-gradient() создаёт конический градиент, который можно использовать в качестве значения свойства background-image. Основной синтаксис функции выглядит следующим образом:

background-image: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

• from angle — начальный угол градиента.
• position — положение центральной точки градиента.
• color-stop — точки остановки цвета, определяющие, где и как цвета должны переходить друг в друга.

Пример простого конического градиента

background-image: conic-gradient(red, yellow, green);

В этом примере создаётся конический градиент, который плавно переходит от красного к жёлтому и зелёному цветам, начиная с верхней части элемента.

Указание начального угла и позиции градиента

Начальный угол

Начальный угол градиента указывается с помощью ключевого слова from и значения в градусах. По умолчанию градиент начинается с 0 градусов (верх элемента).

background-image: conic-gradient(from 45deg, red, yellow, green);

В этом примере градиент начинается с угла 45 градусов.

Позиция градиента

Позиция центральной точки градиента указывается с помощью ключевого слова at и значения координат (например, в процентах или пикселях). По умолчанию градиент центрируется в середине элемента.

background-image: conic-gradient(at 50% 50%, red, yellow, green);
background-image: conic-gradient(at top left, red, yellow, green);

Точки остановки цвета

Основные точки остановки

Цвета в градиенте могут располагаться в определённых точках, что позволяет создавать более сложные переходы. По умолчанию цвета равномерно распределяются по окружности градиента.

background-image: conic-gradient(red 0%, yellow 33%, green 66%, blue 100%);

В этом примере жёлтый цвет занимает треть окружности градиента, зелёный — две трети, а синий заканчивает окружность.

Использование нескольких цветов

Можно использовать больше двух цветов для создания многоцветного градиента.

background-image: conic-gradient(red, yellow, green, blue, purple);

Примеры использования

Создание конического градиента для фона кнопки

button {
    background-image: conic-gradient(from 0deg at center, #ff7e5f, #feb47b, #ff7e5f);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

Градиентный фон для блока

div.gradient-box {
    background-image: conic-gradient(at center, #ff7e5f, #feb47b, #ff7e5f);
    padding: 20px;
    border-radius: 5px;
    color: white;
}

Конический градиент с заданным углом и положением

div.custom-gradient {
    background-image: conic-gradient(from 90deg at 50% 50%, #ff7e5f, #feb47b, #ff7e5f);
    height: 200px;
    width: 100%;
}

Создание узоров с помощью conic-gradient()

Радужный круг

div.rainbow-circle {
    background-image: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

Сегментированный круг

div.segmented-circle {
    background-image: conic-gradient(from 0deg at center, red 0deg 60deg, yellow 60deg 120deg, green 120deg 180deg, blue 180deg 240deg, purple 240deg 300deg, red 300deg 360deg);
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

Заключение

Функция conic-gradient() в CSS предоставляет мощные возможности для создания визуально привлекательных фонов с коническими переходами цветов. С её помощью можно легко задавать начальный угол, позицию градиента и управлять точками остановки цвета. Освоив эту функцию, вы сможете значительно улучшить внешний вид своих веб-страниц и добавить им стильных и динамичных элементов.