Presets

Ready-to-use gradient strings and dynamic generators.

Fixed gradient strings

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

element.style.background = sunsetGradient

Export	Description
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.

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

Option	Type	Default	Description
direction	string	'to right'	CSS direction keyword
angle	number	—	Angle in degrees
steps	number	5	Interpolation steps (3 = only anchor colors)
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'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.

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

Function	Description
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