VueCraft NPM

Presets ​

Ready-to-use gradient strings and dynamic generators.

Fixed gradient strings ​

ts
import {
  sunsetGradient,
  oceanGradient,
  auroraGradient,
  fireGradient,
  midnightGradient,
  peachGradient,
  mintGradient,
  rainbowGradient,
  glowGradient,
  forestGradient,
  goldenHourGradient,
  neonGradient,
  nordicGradient,
  pastelGradient,
  deepSpaceGradient,
} from 'css-magic-gradient'

element.style.background = sunsetGradient

sunsetGradient ​

Orange → magenta, bottom-right.

oceanGradient ​

Cyan → dark navy, bottom.

auroraGradient ​

Violet → green → teal, right.

fireGradient ​

Yellow → orange → red, top.

midnightGradient ​

Dark indigo → near-black.

peachGradient ​

Soft pink → warm orange.

mintGradient ​

Light green → teal.

rainbowGradient ​

Full-spectrum conic (24 steps).

glowGradient ​

Radial warm-gold glow.

forestGradient ​

Light green → deep forest green.

goldenHourGradient ​

Warm gold → pink → orange.

neonGradient ​

Electric green → vivid pink → bright cyan.

nordicGradient ​

Icy blue → cool gray → near-white.

pastelGradient ​

Soft lavender → blush pink → pale mint.

deepSpaceGradient ​

Near-black navy → deep indigo → violet.

Color harmony generators ​

These use interpolateColors / createColorScale from color-value-tools for smooth perceptual transitions.

ts
import {
  createComplementaryGradient,
  createTriadicGradient,
  createAnalogousGradient,
  createTetradicGradient,
  createSplitComplementaryGradient,
  createMonochromaticGradient,
  createHueWheelGradient,
} from 'css-magic-gradient'

// Base color ↔ complement, interpolated in oklch (default)
createComplementaryGradient('#3498db', { steps: 7, interpolationSpace: 'oklch' })

// Triadic — 3 colors 120° apart; smoothness = total interpolated steps
createTriadicGradient('#e74c3c', { smoothness: 9, interpolationSpace: 'oklab' })

// Analogous — spread controls hue angle passed to analogous()
createAnalogousGradient('#2ecc71', { spread: 45, steps: 7 })

// Tetradic — 4 colors 90° apart; supports linear, radial, conic
createTetradicGradient('#9b59b6', { type: 'linear' })
createTetradicGradient('#9b59b6', { type: 'conic', steps: 24 })
createTetradicGradient('#9b59b6', { type: 'radial', interpolationSpace: 'oklch' })

// Split-complementary — base + two colors at 150° and 210°
createSplitComplementaryGradient('#3498db', { steps: 5 })

// Monochromatic shades via colorShades()
createMonochromaticGradient('#9b59b6', 7, { direction: 'to right' })

// Hue-wheel conic from any base color
createHueWheelGradient('#3498db', { steps: 16, fromAngle: 45 })

HarmonyGradientOptions ​

direction ​

string · default: 'to right'

CSS direction keyword.

angle ​

number

Angle in degrees.

steps ​

number · default: 5

Interpolation steps (3 = only anchor colors).

interpolationSpace ​

'rgb' | 'hsl' | 'oklab' | 'oklch' · default: 'oklch'

Color space for JS-side interpolation.

interpolationSpace vs interpolation — interpolationSpace controls how JavaScript mixes colors when building the stop list (via createColorScale / interpolateColors). interpolation adds in oklch to the CSS output and lets the browser interpolate between stops. Harmony generators produce pre-computed stop arrays, so only interpolationSpace applies to them.

'lab' and 'lch' are intentionally absent from interpolationSpace — createColorScale does not support them. Use 'oklab' and 'oklch' instead (perceptually superior successors).

Palette generators ​

Generate gradients through tints, shades, or tones using Oklab-based interpolation from color-value-tools.

ts
import { createTintGradient, createShadeGradient, createToneGradient } from 'css-magic-gradient'

// Base color → white (through Oklab tints)
createTintGradient('#3498db', 7, { direction: 'to right' })

// Base color → black (through Oklab shades)
createShadeGradient('#e74c3c', 5)

// Base color → gray (through Oklab tones)
createToneGradient('#9b59b6', 7, { gray: '#707070' })

createTintGradient(color, steps?, opts?) ​

Gradient from base color toward white.

createShadeGradient(color, steps?, opts?) ​

Gradient from base color toward black.

createToneGradient(color, steps?, opts?) ​

Gradient from base color toward gray. Accepts optional gray color.