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

createLinearGradient

Из базового цвета (автоматически генерирует точки)

Принимает любой формат цвета: hex, rgb(), hsl(), именованный CSS-цвет или CSS-переменную.

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

// Hex
createLinearGradient('#3498db')
// → 'linear-gradient(to bottom, #5faee3, #3498db)'

// Именованный цвет
createLinearGradient('cornflowerblue', { direction: 'to right', offsetPercent: 20 })

// CSS-переменная (использует fallback для расчёта яркости)
createLinearGradient('var(--brand-color)', { fallbackColor: '#3498db' })

// Угол вместо ключевого слова направления
createLinearGradient('#e74c3c', { angle: 135 })

// Интерполяция CSS Color Level 4 (oklch, lab, hsl, srgb, oklab, lch)
createLinearGradient('#9b59b6', { direction: 'to right', interpolation: 'oklch' })
// → 'linear-gradient(to right in oklch, …)'

// Повторяющийся вариант
createLinearGradient('#2ecc71', { angle: 45, repeating: true })
// → 'repeating-linear-gradient(45deg, …)'

GradientOptions

Опция	Тип	По умолчанию	Описание
direction	string	'to bottom'	Ключевое слово CSS-направления
angle	number	—	Угол в градусах. Переопределяет direction
offsetPercent	number	15	Смещение яркости (%) для более светлой стартовой точки
fallbackColor	string	'#f5e477'	Fallback для CSS-переменных или неизвестных форматов
interpolation	'srgb' | 'oklch' | 'lab' | 'hsl' | 'oklab' | 'lch'	—	Пространство интерполяции CSS Color Level 4
repeating	boolean	false	Использовать repeating-linear-gradient

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

createLinearGradient(
  [
    { color: '#ff6b6b', position: '0%' },
    { color: '#feca57', position: '50%' },
    { color: '#48dbfb', position: '100%' },
  ],
  { direction: 'to right' },
)
// → 'linear-gradient(to right, #ff6b6b 0%, #feca57 50%, #48dbfb 100%)'

// С непрозрачностью для каждой точки
createLinearGradient(
  [
    { color: '#e74c3c', opacity: 1, position: '0%' },
    { color: '#e74c3c', opacity: 0, position: '100%' },
  ],
  { angle: 90 },
)
// → 'linear-gradient(90deg, #e74c3c 0%, rgba(231, 76, 60, 0) 100%)'

// opacity: 0 сокращённо → 'transparent'
createLinearGradient([{ color: '#3498db' }, { color: '#3498db', opacity: 0 }])

ColorStop

Поле	Тип	Описание
color	string	Любое значение CSS-цвета
opacity	number	0–1. 0 → transparent. Применяется через конвертацию в RGBA
position	string | number	например '0%', '20px'

createMultiStepLinearGradient

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

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

createMultiStepLinearGradient('#3498db', 5, { offsetPercent: 25, direction: 'to right' })

Параметр	Тип	По умолчанию	Описание
baseColor	string	—	Любой поддерживаемый формат цвета
steps	number	3	Число цветовых точек
options	GradientOptions	—	То же, что у createLinearGradient

createMixedLinearGradient

Создаёт градиент через HSL-интерполяцию между двумя произвольными цветами по steps точкам.

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

createMixedLinearGradient('#ff6b6b', '#4ecdc4', 7, { direction: 'to right' })
createMixedLinearGradient('tomato', 'steelblue', 5)
createMixedLinearGradient('rgb(255, 100, 100)', 'hsl(200, 60%, 50%)', 6)