Линейные градиенты

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

В gradiente линейный градиент - это не просто CSS-строка. Это типизированная модель градиента с направлением, настройками интерполяции, stops, опциональными color hints и repeating-флагом. Одна и та же модель может быть преобразована в CSS, Canvas 2D, Canvas WebGL, SVG или в target пользовательского transformer-а.

linear-gradient(120deg in oklch, #ff74f6 0%, #fb7655 45%, #405de6 100%)

Пример линейного градиента120deg OKLCH-переходlinear-gradient(120deg in oklch, #ff74f6 0%, #fb7655 45%, #405de6 100%)

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

Каждый preview-блок на этой странице отрисовывает один и тот же исходный градиент сразу в четырех targets: CSS, Canvas 2D, Canvas WebGL и SVG. Колонка WebGL - это snapshot, созданный через transformTo('canvas-webgl', gradient), поэтому страница не держит много активных WebGL contexts одновременно. Превью загружаются лениво, когда пример приближается к viewport.

Интеграция gradiente

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

Одна и та же модель gradiente может быть подключена в React, Vanilla JS, Vue или Svelte. Каждый пример парсит исходную строку, преобразует ее через transformTo('css') и применяет результат как настоящий background image.

ReactLinearGradientPreview.tsx

Из Чего Состоит Линейный Градиент

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

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

НаправлениеKeyword-направление вроде `to right`, диагональ вроде `to top left` или угол вроде `120deg`, `0.25turn`, `1.57rad`, `100grad`.

ИнтерполяцияColor space после `in` и опциональный hue route для polar color spaces: `shorter`, `longer`, `increasing`, `decreasing`.

Stop-листColor stops, опциональные процентные позиции, double positions и color hints.

Модель, которую хранит gradiente, не зависит от renderer-а:

type GradientLinearConfig = {
  angle: number
  interpolation: {
    colorSpace: GradientColorSpace
    hue?: GradientHueInterpolation
  }
  isRepeating?: boolean
}

Угол нормализуется в радианы. Позиции stops хранятся как нормализованные числа: 0 означает 0%, а 1 означает 100%.

Модель stop для линейного градиента - это общая gradiente stop-модель:

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

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

Что Делает gradiente

Для linear-gradient gradiente берёт на себя работу, которая обычно размазывается между парсерами, UI-кодом, сериализаторами и renderer-ами:

• Парсит CSS-like строки в instance GradientLinear.
• Нормализует направление в радианы.
• Выводит отсутствующие позиции stops.
• Сортирует stops, сохраняя стабильный порядок для одинаковых позиций.
• Хранит color hints как полноценные элементы stop-листа.
• Сжимает double-position stops при сериализации.
• Хранит repeating-состояние из repeating-linear-gradient(...).
• Сэмплит интерполяцию для renderer-ов, которым нужны concrete color stops.
• Преобразует одну и ту же модель в CSS, Canvas 2D, Canvas WebGL и SVG.

Анатомия

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

linear-gradient(
  [direction] [in color-space [hue-mode hue]],
  color-stop-or-hint,
  color-stop-or-hint,
  ...
)

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

linear-gradient(to right in oklch, red 0%, 35%, blue 100%)

Пример линейного градиентаНаправление, интерполяция, color hint и stopslinear-gradient(to right in oklch, red 0%, 35%, blue 100%)

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

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

• to right: ось градиента идёт слева направо.
• in oklch: цвета интерполируются в OKLCH.
• red 0%: первая цветовая stop-точка находится в начале.
• 35%: color hint, который сдвигает midpoint перехода от red к blue.
• blue 100%: финальная цветовая stop-точка находится в конце.

Направление

Направление определяет, как невидимая sampling line пересекает область отрисовки.

Если направление не указано, gradiente использует CSS-like default: сверху вниз. Внутренний угол равен Math.PI радиан, и serializer не выводит его, потому что это значение по умолчанию.

linear-gradient(red, blue)

Пример линейного градиентаНаправление по умолчаниюlinear-gradient(red, blue)

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

Keyword-направления удобны для ручного написания, потому что их легко читать.

linear-gradient(to right, red, blue)

Пример линейного градиентаKeyword-направлениеlinear-gradient(to right, red, blue)

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

Диагональные keyword-направления тоже поддерживаются.

linear-gradient(to top left, red 0%, blue 100%)

Пример линейного градиентаДиагональное keyword-направлениеlinear-gradient(to top left, red, blue)

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

Числовые углы лучше подходят для generated data, анимации и точных контролов. gradiente принимает deg, rad, turn и grad.

linear-gradient(0.25turn, red, blue)

Пример линейного градиентаЧисловой уголlinear-gradient(to right, red, blue)

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

Углы нормализуются. Например, 450deg эквивалентен 90deg, поэтому сериализация может превратиться в to right.

linear-gradient(450deg, red, blue)

Пример линейного градиентаНормализованный уголlinear-gradient(to right, red, blue)

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

Распространённые направления соответствуют таким внутренним углам:

без значения / `to bottom``Math.PI` радиан. Это default, поэтому он не выводится в `toString()`.

`to top``0` радиан.

`to right``Math.PI / 2` радиан.

`to left``Math.PI * 1.5` радиан.

диагонали`to top right`, `to bottom right`, `to bottom left` и `to top left` хранятся как нормализованные диагональные углы.

Stop-лист

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

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

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

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

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

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

linear-gradient(to right, red 0%, 35%, blue 100%)

Пример линейного градиентаColor hintlinear-gradient(to right, red 0%, 35%, blue 100%)

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

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

linear-gradient(to right, red 0% 35%, blue 35% 100%)

Пример линейного градиентаDouble-position stopslinear-gradient(to right, red 0% 35%, blue 35% 100%)

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

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

Интерполяция управляет путём между цветами. Это одно из главных отличий обычной CSS-строки от renderer-модели gradiente: Canvas 2D, WebGL и SVG не везде нативно поддерживают CSS Color 4 interpolation syntax, поэтому gradiente вычисляет renderable color stops для этих targets.

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

linear-gradient(in srgb, red, blue)

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

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

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

linear-gradient(in oklab, red, blue)

Пример линейного градиентаOKLab интерполяцияlinear-gradient(in oklab, red, blue)

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

Polar color spaces могут использовать режимы hue interpolation. gradiente поддерживает shorter, longer, increasing и decreasing.

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

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

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

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

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

Повторяющиеся Линейные Градиенты

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

repeating-linear-gradient(to right, red 0%, blue 10%)

Пример линейного градиентаПовторяющийся линейный градиентrepeating-linear-gradient(to right, red 0%, blue 10%)

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

Repeating-градиенты особенно полезны для stripes, scanlines, rulers, debugging overlays и generated pattern systems.

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

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

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

new GradientLinear(stops, config?)

stops обязателен. config опционален, а отсутствующие значения берутся из class defaults.

import { GradientLinear } from 'gradiente'

const gradient = new GradientLinear(
  [
    {
      type: 'color-stop',
      value: '#ff74f6',
      position: 0,
    },
    {
      type: 'color-stop',
      value: '#405de6',
      position: 1,
    },
  ],
  {
    angle: Math.PI / 2,
    interpolation: {
      colorSpace: 'oklch',
    },
  },
)

Пример линейного градиентаЭквивалентный вывод конструктораlinear-gradient(to right in oklch, #ff74f6, #405de6)

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

Трансформация Линейного Градиента

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

import { parse, transformTo } from 'gradiente'

const gradient = parse(
  'linear-gradient(135deg 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)

Пример линейного градиентаВход для renderer transformerlinear-gradient(to bottom right in oklch longer hue, #ff74f6, #405de6)

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

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

`css`CSS background-строка.

`canvas-2d`Paint object с `draw(ctx, width, height)`.

`canvas-webgl`Paint object с `draw(canvas, width, height)`.

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

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

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

import { format } from 'gradiente'

const input = 'linear-gradient(to right in oklch, #ff74f6 0%, 42%, #405de6 100%)'
const normalized = format(input)

Пример линейного градиентаФорматированный пользовательский вводlinear-gradient(to right in oklch, #ff74f6 0%, 42%, #405de6 100%)

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

Нормализация полезна, когда пользователи вводят градиенты вручную, когда editor state сохраняется или когда generated gradients должны иметь стабильный output для тестов и snapshots.

Дефолты

Это class defaults для нового линейного градиента, если config values не переданы:

angle: Math.PI
interpolation.colorSpace: "srgb"
isRepeating: false

Default values не выводятся в toString(). Например, 180deg и in srgb - это значения по умолчанию для non-repeating linear gradient, поэтому их не нужно сериализовать.

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

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

1. Выбери направление: keyword для hand-authored gradients, angle для generated data.
2. Выбери интерполяцию: srgb для CSS parity, oklab или oklch для более плавных ramps.
3. Добавь минимум две color stops, чтобы визуальный output был полезным.
4. Укажи позиции stops явно, если дизайн должен переживать редактирование.
5. Используй color hints, когда нужно сдвинуть midpoint перехода.
6. Используй double-position stops, когда нужны жёсткие bands.
7. Используй format() перед сохранением пользовательского ввода.
8. Используй transformTo() для renderer output вместо ручной конвертации строки.