Конические градиенты

Конический градиент - это угловой градиент. Он выбирает цвет не по линии и не по расстоянию от центра, а по углу вокруг центральной точки. Из-за этого градиент будто вращается вокруг центра и хорошо подходит для цветовых колес, диаграмм, шкал, ручек управления, loader-анимаций, углового света, круговых масок и любых интерфейсов, где важно направление вокруг точки.

В CSS-геометрии конического градиента 0deg смотрит вверх, а углы идут по часовой стрелке. gradiente использует эту же договоренность для CSS, Canvas 2D, Canvas WebGL и SVG.

conic-gradient(from 74deg at 50% 50% in oklch, hsl(325, 64%, 54%) 0%, hsl(30, 85%, 58%) 63%, hsl(3, 69%, 66%) 72%, hsl(208, 94%, 47%) 100%)

Пример conic-градиентаЦветовое колесо OKLCH со смещенным центромconic-gradient(from 74deg at 50% 50% in oklch, hsl(325, 64%, 54%) 0%, hsl(30, 85%, 58%) 63%, hsl(3, 69%, 66%) 72%, hsl(208, 94%, 47%) 100%)

Превью загрузится, когда дойдет до области просмотра.

conic-gradient(...) и repeating-conic-gradient(...) - это нативные CSS функции, но gradiente делает больше, чем просто передает строку дальше. Он парсит градиент во внутреннюю модель, нормализует ее и трансформирует одну и ту же модель в CSS, Canvas 2D, Canvas WebGL и SVG. SVG target генерируется как pattern payload, потому что в SVG нет нативного примитива для conic-градиента.

Каждый preview-блок на этой странице отрисован через gradiente сразу в четырех targets. Колонка WebGL сохраняется как snapshot, чтобы страница не держала много живых WebGL-контекстов одновременно.

Интеграция gradiente

Использование конического градиента во фреймворке

Conic-градиенты являются нативными CSS backgrounds, но gradiente все равно парсит, сортирует, нормализует и трансформирует одну модель для каждого renderer. Каждый пример преобразует распарсенный градиент через transformTo('css') и подключает результат во фреймворке.

ReactConicGradientPreview.tsx

Из чего состоит конический градиент

У модели конического градиента есть пять основных частей:

Имя функции`conic-gradient(...)` или `repeating-conic-gradient(...)`. Публичный тип instance остается `conic-gradient`; повторение хранится в config.

Начальный уголОпциональный угол `from`, который поворачивает точку, где начинается первый stop.

ПозицияЦентральная точка после `at`: например, `at center`, `at left top` или `at 35% 45%`.

ИнтерполяцияОпциональное правило интерполяции цвета: например, `in srgb`, `in oklab` или `in oklch longer hue`.

Список stopsColor stops, опциональные процентные позиции, double-position stops и color hints вокруг угловой развертки.

Внутри GradientConic хранит config отдельно от stops:

type GradientConicConfig = {
  from: GradientAngleValue
  position: GradientPosition
  interpolation: {
    colorSpace: GradientColorSpace
    hue?: GradientHueInterpolation
  }
  isRepeating?: boolean
}

Позиции stops хранятся как нормализованные числа: 0 означает начало угловой развертки, а 1 означает конец развертки. В строковом синтаксисе на этой странице эти позиции записываются в процентах.

type GradientConicStop =
  | {
      type: 'color-stop'
      value: string
      position: number
    }
  | {
      type: 'color-hint'
      position: number
    }

Что делает gradiente

Для conic-gradient gradiente берет на себя и CSS-совместимое поведение, и renderer-specific вывод:

• Парсит conic-строки в instance GradientConic.
• Хранит начальный угол, позицию центра, интерполяцию, stops и repeating-состояние.
• Подставляет дефолтные значения config из одного места в конструкторе.
• Заполняет пропущенные позиции stops.
• Нормализует keyword-позиции в порядок x/y.
• Сохраняет color hints как полноценные stop-данные.
• Компактно сериализует double-position stops.
• Сортирует позиционированные stops в стабильном порядке.
• Рисует одну и ту же внутреннюю модель в Canvas 2D и Canvas WebGL.
• Генерирует SVG pattern для рендереров, которым нужен SVG-вывод.
• Трансформирует одну модель в CSS, Canvas 2D, Canvas WebGL и SVG.

Анатомия

Полный синтаксис состоит из опционального config-блока и обязательного списка stops:

conic-gradient(
  [from angle] [at position] [in color-space [hue-mode hue]],
  color-stop-or-hint,
  color-stop-or-hint,
  ...
)

Первый элемент до запятой считается config только тогда, когда содержит conic config tokens. Все после первой запятой относится к списку stops.

conic-gradient(from 74deg at 50% 50% in oklch, red 0%, 35%, blue 100%)

Пример conic-градиентаНачальный угол, центр, интерполяция, color hint и stopsconic-gradient(from 74deg at 50% 50% in oklch, red 0%, 35%, blue 100%)

Превью загрузится, когда дойдет до области просмотра.

В этом примере есть:

• from 74deg: угловая развертка повернута на 74 градуса.
• at 50% 50%: центр находится в середине области отрисовки.
• in oklch: цвета интерполируются в OKLCH.
• red 0%: первый color stop стоит в начале развертки.
• 35%: color hint, который сдвигает midpoint перехода от red к blue.
• blue 100%: последний color stop стоит в конце развертки.

Значения по умолчанию

Если conic config не указан, gradiente использует CSS-похожие дефолты:

conic-gradient(red, blue)

Пример conic-градиентаConic-градиент по умолчаниюconic-gradient(red, blue)

Превью загрузится, когда дойдет до области просмотра.

Дефолты класса:

from: 0deg
position: center center
interpolation.colorSpace: "srgb"
isRepeating: false

Дефолтные значения не попадают в toString(). Поэтому conic-gradient(from 0deg at center in srgb, red, blue) может сериализоваться в компактный conic-gradient(red, blue).

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

Угол from поворачивает весь градиент вокруг его центра. Он не меняет позиции stops; он меняет место, где начинается угловая развертка.

90deg поворачивает первый stop к правой стороне блока:

conic-gradient(from 90deg, red, blue)

Пример conic-градиентаНачальный угол в градусахconic-gradient(from 90deg, red, blue)

Превью загрузится, когда дойдет до области просмотра.

Углы могут использовать CSS angle units, которые поддерживает модель: deg, turn, rad и grad.

conic-gradient(from 0.25turn, red, blue)

Пример conic-градиентаНачальный угол в turnconic-gradient(from 0.25turn, red, blue)

Превью загрузится, когда дойдет до области просмотра.

conic-gradient(from 1.5708rad, red, blue)

Пример conic-градиентаНачальный угол в радианахconic-gradient(from 1.5708rad, red, blue)

Превью загрузится, когда дойдет до области просмотра.

Позиция

Позиция двигает центр угловой развертки. Она всегда идет после at.

Keyword-позиции используют x/y keywords:

conic-gradient(at top left, red, blue)

Пример conic-градиентаЦентр через keywordsconic-gradient(at left top, red, blue)

Превью загрузится, когда дойдет до области просмотра.

gradiente нормализует keyword-позиции в x/y порядок. Например, at top left сериализуется как at left top.

Value-позиции используют два length-percentage значения:

conic-gradient(at 35% 45%, red, blue)

Пример conic-градиентаПроцентная позиция центраconic-gradient(at 35% 45%, red, blue)

Превью загрузится, когда дойдет до области просмотра.

from и at можно комбинировать, когда угловой развертке нужен и поворот, и смещенный центр:

conic-gradient(from 74deg at 35% 45%, #d53f96, #ef9439, #077fe9)

Пример conic-градиентаНачальный угол со смещенным центромconic-gradient(from 74deg at 35% 45%, #d53f96, #ef9439, #077fe9)

Превью загрузится, когда дойдет до области просмотра.

Текущий parser держит позиции строгими: keyword-позиции состоят только из keywords, а value-позиции требуют два length-percentage tokens. Смешанные CSS формы вроде left 20px top 10px пока не входят в эту модель.

Список stops

Список stops определяет, какие цвета появляются вокруг окружности. Практический conic-градиент обычно содержит хотя бы два color stops.

Если у color stop нет явной позиции, gradiente вычисляет ее по соседним stops. Первый unresolved color stop становится 0%; последний unresolved color stop становится 100%; unresolved stops между известными позициями распределяются равномерно.

conic-gradient(red 0%, yellow 40%, blue 100%)

Пример conic-градиентаПозиционированные color stopsconic-gradient(red 0%, yellow 40%, blue 100%)

Превью загрузится, когда дойдет до области просмотра.

Color hints - это отдельные проценты между двумя color stops. Они не создают новый color stop. Они сдвигают воспринимаемый midpoint сегмента интерполяции.

conic-gradient(red 0%, 35%, blue 100%)

Пример conic-градиентаColor hintconic-gradient(red 0%, 35%, blue 100%)

Превью загрузится, когда дойдет до области просмотра.

Double-position stops создают жесткие угловые секторы. Цвет, записанный с двумя позициями, хранится как две соседние color stop-точки с одним цветом, а затем по возможности сериализуется обратно в компактную форму.

conic-gradient(red 0% 25%, blue 25% 50%, yellow 50% 100%)

Пример conic-градиентаЖесткие угловые секторыconic-gradient(red 0% 25%, blue 25% 50%, yellow 50% 100%)

Превью загрузится, когда дойдет до области просмотра.

Когда позиционированные stops записаны не по порядку, gradiente нормализует их в стабильный порядок. Это важно для состояния редактора, snapshots и сравнения между разными renderers.

conic-gradient(from 74deg, red, blue 72%, yellow 63%)

Пример conic-градиентаНормализованный порядок stopsconic-gradient(from 74deg, red 0%, yellow 63%, blue 72%)

Превью загрузится, когда дойдет до области просмотра.

Интерполяция

Интерполяция управляет путем между цветами. Для conic-градиентов это особенно заметно, потому что hue-изменения оборачиваются вокруг центра и сразу бросаются в глаза.

Пространство интерполяции по умолчанию - srgb.

conic-gradient(in srgb, red, blue)

Пример conic-градиентаsRGB-интерполяцияconic-gradient(red, blue)

Превью загрузится, когда дойдет до области просмотра.

Перцептуальные пространства вроде oklab часто дают более плавные угловые переходы.

conic-gradient(at 25% 75% in oklab, red, blue)

Пример conic-градиентаOKLab-интерполяцияconic-gradient(at 25% 75% in oklab, red, blue)

Превью загрузится, когда дойдет до области просмотра.

Полярные цветовые пространства могут использовать hue interpolation modes. gradiente поддерживает shorter, longer, increasing и decreasing.

conic-gradient(in oklch longer hue, hsl(325, 64%, 54%), hsl(208, 94%, 47%))

Пример conic-градиентаOKLCH-интерполяция longer hueconic-gradient(in oklch longer hue, hsl(325, 64%, 54%), hsl(208, 94%, 47%))

Превью загрузится, когда дойдет до области просмотра.

Hue-интерполяция имеет смысл только для полярных цветовых пространств. Если hue mode передан для прямоугольного пространства вроде oklab, gradiente сохранит color space и сериализует градиент без hue mode.

Поддерживаемые color spaces:

oklab
lch
oklch
hsl
hwb
lab
srgb
srgb-linear
xyz
display-p3
a98-rgb
prophoto-rgb
rec2020

Повторяющиеся конические градиенты

repeating-conic-gradient(...) использует тот же внутренний gradient kind, что и conic-gradient(...). Префикс устанавливает isRepeating: true в config, а instance type остается conic-gradient.

repeating-conic-gradient(from 45deg at 49% 45%, red 10%, 50%, blue 80%)

Пример conic-градиентаПовторяющийся conic-градиентrepeating-conic-gradient(from 45deg at 49% 45%, red 10%, 50%, blue 80%)

Превью загрузится, когда дойдет до области просмотра.

Повторяющиеся conic-градиенты полезны для делений колеса, полярных диаграмм, loading rings, угловых линеек, технических overlay-слоев, радиальных полос и генерируемых угловых паттернов.

Программное создание

Большинству пользователей лучше начинать с parse(), потому что он принимает тот же input shape, что и DSL. Когда нужно собрать градиент напрямую, используйте GradientConic.

Конструктор принимает два параметра:

new GradientConic(stops, config?)

stops обязателен. config опционален, а пропущенные значения подставляются из дефолтов класса.

import { GradientConic } from 'gradiente'

const gradient = new GradientConic(
  [
    {
      type: 'color-stop',
      value: '#ff74f6',
      position: 0,
    },
    {
      type: 'color-stop',
      value: '#405de6',
      position: 1,
    },
  ],
  {
    isRepeating: true,
    from: {
      kind: 'angle',
      value: 45,
      unit: 'deg',
    },
    position: {
      kind: 'values',
      x: {
        kind: 'percent',
        value: 49,
      },
      y: {
        kind: 'percent',
        value: 45,
      },
    },
    interpolation: {
      colorSpace: 'oklch',
    },
  },
)

Пример conic-градиентаЭквивалентный вывод конструктораrepeating-conic-gradient(from 45deg at 49% 45% in oklch, #ff74f6, #405de6)

Превью загрузится, когда дойдет до области просмотра.

Трансформация конического градиента

Каждый renderer target получает одну и ту же исходную модель. В этом главная идея Core API: один раз распарсить, много раз трансформировать.

import { parse, transformTo } from 'gradiente'

const gradient = parse(
  'conic-gradient(from 74deg at 35% 45% in oklch longer hue, #ff74f6, #405de6)'
)

const css = transformTo('css', gradient)
const canvas2d = transformTo('canvas-2d', gradient)
const webgl = transformTo('canvas-webgl', gradient)
const svg = transformTo('svg', gradient)

Пример conic-градиентаВход для renderer transformerconic-gradient(from 74deg at 35% 45% in oklch longer hue, #ff74f6, #405de6)

Превью загрузится, когда дойдет до области просмотра.

У transformer outputs разные формы:

`css`CSS background string. Для conic-градиентов это нормализованная нативная CSS-строка `conic-gradient(...)` или `repeating-conic-gradient(...)`.

`canvas-2d`Paint object с методом `draw(ctx, width, height)`.

`canvas-webgl`Paint object с методом `draw(canvas, width, height)`.

`svg`SVG pattern payload с `defs`, `url` и сериализованными SVG-данными.

Нормализация

Используйте format() перед сохранением пользовательского ввода. Он парсит строку во внутреннюю модель и сериализует ее обратно в каноническую строку gradiente.

import { format } from 'gradiente'

const input = 'conic-gradient(from 74deg, red, blue 72%, yellow 63%)'
const normalized = format(input)

Пример conic-градиентаФорматированный пользовательский вводconic-gradient(from 74deg, red 0%, yellow 63%, blue 72%)

Превью загрузится, когда дойдет до области просмотра.

Нормализация особенно полезна для conic-градиентов, потому что нативный CSS и авторский input могут визуально расходиться, если stops записаны не по порядку. gradiente парсит строку, сортирует позиционированные stops в стабильную модель и затем использует эту модель для каждого renderer.

Практический чеклист

Используйте этот порядок, когда собираете или валидируете conic-градиент:

1. Выберите центр через at, если развертка должна вращаться не вокруг центра блока.
2. Выберите from, если первый stop должен начинаться с конкретного угла.
3. Выберите интерполяцию: srgb для простой совместимости, oklab или oklch для более плавных переходов.
4. Добавьте минимум два color stops, чтобы получить полезный визуальный результат.
5. Добавьте явные процентные позиции stops, если угловые секторы должны переживать редактирование.
6. Используйте color hints, когда нужно сдвинуть midpoint перехода.
7. Используйте double-position stops, когда нужны жесткие секторы.
8. Используйте repeating-conic-gradient(...) для делений, полос или повторяющихся угловых bands.
9. Используйте format() перед сохранением пользовательского ввода.
10. Используйте transformTo() для renderer output вместо ручной конвертации строки.