VueCraft NPM

Пресеты ​

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

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

ts
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 для плавных перцептивных переходов.

ts
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.

ts
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.