Пресеты

Готовые к использованию строки градиентов и динамические генераторы.

Фиксированные строки градиентов

import {
  sunsetGradient,
  oceanGradient,
  auroraGradient,
  fireGradient,
  midnightGradient,
  peachGradient,
  mintGradient,
  rainbowGradient,
  glowGradient,
  forestGradient,
  goldenHourGradient,
  neonGradient,
  nordicGradient,
  pastelGradient,
  deepSpaceGradient,
} from 'css-magic-gradient'

element.style.background = sunsetGradient

Экспорт	Описание
sunsetGradient	Оранжевый → пурпурный, нижний правый угол
oceanGradient	Голубой → тёмно-синий, снизу
auroraGradient	Фиолетовый → зелёный → бирюзовый, справа
fireGradient	Жёлтый → оранжевый → красный, сверху
midnightGradient	Тёмный индиго → почти чёрный
peachGradient	Нежно-розовый → тёплый оранжевый
mintGradient	Светло-зелёный → бирюзовый
rainbowGradient	Радуга на весь спектр, конический (24 шага)
glowGradient	Радиальное тёплое золотистое свечение
forestGradient	Светло-зелёный → глубокий лесной зелёный
goldenHourGradient	Тёплое золото → розовый → оранжевый
neonGradient	Электрический зелёный → яркий розовый → яркий циан
nordicGradient	Ледяной синий → холодный серый → почти белый
pastelGradient	Нежная лаванда → розовый румянец → бледная мята
deepSpaceGradient	Почти чёрный тёмно-синий → глубокий индиго → фиолетовый

Генераторы цветовых гармоний

Используют interpolateColors / createColorScale из color-value-tools для плавных перцептивных переходов.

import {
  createComplementaryGradient,
  createTriadicGradient,
  createAnalogousGradient,
  createTetradicGradient,
  createSplitComplementaryGradient,
  createMonochromaticGradient,
  createHueWheelGradient,
} from 'css-magic-gradient'

// Базовый цвет ↔ дополнительный, интерполяция в oklch (по умолчанию)
createComplementaryGradient('#3498db', { steps: 7, interpolationSpace: 'oklch' })

// Триадный — 3 цвета через 120°; smoothness = общее число шагов интерполяции
createTriadicGradient('#e74c3c', { smoothness: 9, interpolationSpace: 'oklab' })

// Аналоговый — spread управляет углом тона, передаваемым в analogous()
createAnalogousGradient('#2ecc71', { spread: 45, steps: 7 })

// Тетрадный — 4 цвета через 90°; поддерживает linear, radial, conic
createTetradicGradient('#9b59b6', { type: 'linear' })
createTetradicGradient('#9b59b6', { type: 'conic', steps: 24 })
createTetradicGradient('#9b59b6', { type: 'radial', interpolationSpace: 'oklch' })

// Раздельно-комплементарный — базовый + два цвета на 150° и 210°
createSplitComplementaryGradient('#3498db', { steps: 5 })

// Монохромные оттенки через colorShades()
createMonochromaticGradient('#9b59b6', 7, { direction: 'to right' })

// Конический круг тонов от любого базового цвета
createHueWheelGradient('#3498db', { steps: 16, fromAngle: 45 })

HarmonyGradientOptions

Опция	Тип	По умолчанию	Описание
direction	string	'to right'	Ключевое слово CSS-направления
angle	number	—	Угол в градусах
steps	number	5	Шаги интерполяции (3 = только опорные цвета)
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Цветовое пространство для интерполяции на стороне JS

interpolationSpace против interpolation — interpolationSpace управляет тем, как JavaScript смешивает цвета при построении списка точек (через createColorScale / interpolateColors). interpolation добавляет in oklch к CSS-выводу и позволяет браузеру интерполировать между точками. Генераторы гармоний создают заранее вычисленные массивы точек, поэтому к ним применим только interpolationSpace.

'lab' и 'lch' намеренно отсутствуют в interpolationSpace — createColorScale их не поддерживает. Используйте вместо них 'oklab' и 'oklch' (перцептивно превосходящие преемники).

Генераторы палитр

Генерируют градиенты через оттенки, тени или тона, используя интерполяцию на основе Oklab из color-value-tools.

import { createTintGradient, createShadeGradient, createToneGradient } from 'css-magic-gradient'

// Базовый цвет → белый (через оттенки Oklab)
createTintGradient('#3498db', 7, { direction: 'to right' })

// Базовый цвет → чёрный (через тени Oklab)
createShadeGradient('#e74c3c', 5)

// Базовый цвет → серый (через тона Oklab)
createToneGradient('#9b59b6', 7, { gray: '#707070' })

Функция	Описание
createTintGradient(color, steps?, opts?)	Градиент от базового цвета к белому
createShadeGradient(color, steps?, opts?)	Градиент от базового цвета к чёрному
createToneGradient(color, steps?, opts?)	Градиент от базового цвета к серому. Принимает опциональный цвет gray