Радиальные и конические градиенты

createRadialGradient

Из базового цвета

import { createRadialGradient } from 'css-magic-gradient'

createRadialGradient('#e74c3c')
// → 'radial-gradient(ellipse farthest-corner at center, #ed7060, #e74c3c)'

createRadialGradient('#9b59b6', {
  shape: 'circle',
  size: 'closest-side',
  position: '30% 60%',
  offsetPercent: 30,
})

Из явных цветовых точек

createRadialGradient('#000', {
  colors: [
    { color: '#f39c12', position: '0%' },
    { color: '#e74c3c', position: '50%' },
    { color: '#8e44ad', opacity: 0.5, position: '100%' },
  ],
})

Несколько слоёв

createRadialGradient('#000', {
  layers: [
    {
      shape: 'circle',
      size: '40%',
      position: '30% 40%',
      colors: [{ color: '#f39c12' }, { color: 'transparent' }],
    },
    {
      shape: 'circle',
      size: '30%',
      position: '70% 60%',
      colors: [{ color: '#3498db' }, { color: 'transparent' }],
    },
  ],
})

Режим цветовой гармонии

// Автоматически вывести точки из цветовой гармонии
createRadialGradient('#3498db', {
  harmonyType: 'triadic',
  interpolationSpace: 'oklch',
})

createRadialGradient('#e74c3c', {
  harmonyType: 'analogous',
  shape: 'circle',
})

RadialGradientOptions

Опция	Тип	По умолчанию	Описание
shape	'circle' | 'ellipse'	'ellipse'	Форма градиента
size	string | { width, height }	'farthest-corner'	Ключевое слово размера или явные размеры
position	string	'center'	Позиция центра
offsetPercent	number	15	Смещение яркости для автоматических точек
fallbackColor	string	'#f5e477'	Fallback для неподдерживаемых форматов цвета
colors	ColorStop[]	—	Явные точки (переопределяют автогенерацию)
layers	RadialGradientLayer[]	—	Несколько стековых слоёв
repeating	boolean	false	Использовать repeating-radial-gradient
harmonyType	'complementary' | 'triadic' | 'tetradic' | 'analogous'	—	Автогенерация точек из цветовой гармонии
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Цветовое пространство для интерполяции на стороне JS

createRadialGradientLayers

Утилита, генерирующая набор объектов RadialGradientLayer с равномерно распределёнными размерами и цветами, выведенными из гармонии. При передаче в createRadialGradient создаёт вложенный многокольцевой радиальный эффект.

import { createRadialGradientLayers, createRadialGradient } from 'css-magic-gradient'

const layers = createRadialGradientLayers('#3498db', {
  count: 4,
  harmonyType: 'triadic',
  interpolationSpace: 'oklch',
  minSizePercent: 20,
  maxSizePercent: 100,
})

const gradient = createRadialGradient('#3498db', { layers })

Опция	Тип	По умолчанию	Описание
count	number	3	Число слоёв
minSizePercent	number	20	Наименьший размер слоя (%)
maxSizePercent	number	100	Наибольший размер слоя (%)
harmonyType	RadialHarmonyType	'analogous'	Стратегия распределения цветов
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Цветовое пространство для интерполяции на стороне JS
position	string	'center'	Общая позиция центра

createConicGradient

import { createConicGradient } from 'css-magic-gradient'

// Автоматические шаги яркости (по умолчанию)
createConicGradient('#3498db', { steps: 10, offsetPercent: 25 })

// Вращение тона по кругу
createConicGradient('#e74c3c', { hueRotation: true, steps: 12 })

// Кастомный начальный угол и позиция
createConicGradient('#9b59b6', { fromAngle: 45, position: '30% 70%' })

// Явные цветовые точки
createConicGradient('#000', {
  colors: [
    { color: '#ff6b6b', position: '0%' },
    { color: '#feca57', position: '25%' },
    { color: '#48dbfb', position: '75%' },
    { color: '#ff6b6b', position: '100%' },
  ],
})

// Режим цветовой гармонии — интерполирует цвета гармонии по всему кругу
createConicGradient('#e74c3c', { harmonyType: 'triadic', steps: 24 })
createConicGradient('#3498db', { harmonyType: 'tetradic', interpolationSpace: 'oklab' })

// Режим цветовой шкалы — интерполирует через произвольный список цветов
createConicGradient('#000', {
  colorScale: ['#ff0000', '#00ff00', '#0000ff'],
  steps: 36,
})

// Повторяющийся вариант
createConicGradient('#2ecc71', { repeating: true, steps: 4, offsetPercent: 30 })

ConicGradientOptions

Опция	Тип	По умолчанию	Описание
fromAngle	number	0	Начальный угол в градусах
position	string	'50% 50%'	Центр градиента
hueRotation	boolean	false	Вращать тон вместо изменения яркости
harmonyType	'complementary' | 'triadic' | 'tetradic' | 'analogous'	—	Генерация из цветовой гармонии
colorScale	string[]	—	Интерполяция через произвольные цвета по кругу
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Цветовое пространство для интерполяции на стороне JS
steps	number	8	Число генерируемых точек
offsetPercent	number	20	Смещение яркости для автоматических точек
colors	ColorStop[]	—	Явные точки
fallbackColor	string	'#f5e477'	Резервный цвет
repeating	boolean	false	Использовать repeating-conic-gradient

createRainbowConicGradient

Генерирует радугу на весь спектр, проходя по всем тонам в пространстве HSL.

import { createRainbowConicGradient } from 'css-magic-gradient'

createRainbowConicGradient()
createRainbowConicGradient({ steps: 24, saturation: 90, lightness: 55, fromAngle: 90 })
createRainbowConicGradient({ repeating: true, steps: 6 })