VueCraft NPM

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

Базовый линейный градиент ​

createLinearGradient(color, options?)

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

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

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

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

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

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

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

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

baseColor ​

string

Любой поддерживаемый формат цвета.

steps ​

number · по умолчанию: 3

Число цветовых точек.

options ​

GradientOptions

То же, что у createLinearGradient.

Смешение двух цветов ​

createMixedLinearGradient(colorA, colorB, steps, options?)

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

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