VueCraft NPM

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

Радиальный градиент ​

createRadialGradient(baseColor, options?)

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

ts
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,
})

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

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

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

ts
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' }],
    },
  ],
})

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

ts
// Автоматически вывести точки из цветовой гармонии
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(baseColor, options?)

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

ts
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(baseColor, options?)

ts
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(options?)

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

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

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