VueCraft NPM

Linear Gradients ​

Basic Linear Gradient ​

createLinearGradient(color, options?)

From a base color (auto-generates stops) ​

Accepts any color format: hex, rgb(), hsl(), named CSS color, or CSS variable.

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

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

// Named color
createLinearGradient('cornflowerblue', { direction: 'to right', offsetPercent: 20 })

// CSS variable (uses fallback for brightness calculation)
createLinearGradient('var(--brand-color)', { fallbackColor: '#3498db' })

// Angle instead of direction keyword
createLinearGradient('#e74c3c', { angle: 135 })

// CSS Color Level 4 interpolation (oklch, lab, hsl, srgb, oklab, lch)
createLinearGradient('#9b59b6', { direction: 'to right', interpolation: 'oklch' })
// → 'linear-gradient(to right in oklch, …)'

// Repeating variant
createLinearGradient('#2ecc71', { angle: 45, repeating: true })
// → 'repeating-linear-gradient(45deg, …)'

GradientOptions ​

direction ​

string · default: 'to bottom'

CSS direction keyword.

angle ​

number

Angle in degrees. Overrides direction.

offsetPercent ​

number · default: 15

Brightness offset (%) for the lighter start stop.

fallbackColor ​

string · default: '#f5e477'

Fallback for CSS variables or unknown formats.

interpolation ​

'srgb' | 'oklch' | 'lab' | 'hsl' | 'oklab' | 'lch'

CSS Color Level 4 interpolation space.

repeating ​

boolean · default: false

Use repeating-linear-gradient.

From explicit color stops ​

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%)'

// With per-stop opacity
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 shorthand → 'transparent'
createLinearGradient([{ color: '#3498db' }, { color: '#3498db', opacity: 0 }])

ColorStop ​

color ​

string

Any CSS color value.

opacity ​

number

0–1. 0 → transparent. Applies via RGBA conversion.

position ​

string | number

e.g. '0%', '20px'.

Multi-Step Gradient ​

createMultiStepLinearGradient(baseColor, steps, options?)

Generates multiple evenly spaced stops by interpolating brightness from light to the base color.

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

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

baseColor ​

string

Any supported color format.

steps ​

number · default: 3

Number of color stops.

options ​

GradientOptions

Same as createLinearGradient.

Blending Two Colors ​

createMixedLinearGradient(colorA, colorB, steps, options?)

Creates a gradient by HSL-interpolating between two arbitrary colors across steps stops.

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)