VueCraft NPM

Radial & Conic Gradients ​

Radial Gradient ​

createRadialGradient(baseColor, options?)

From a base color ​

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

createRadialGradient('#e74c3c')
// → 'radial-gradient(ellipse farthest-corner at center, #ed7060, #e74c3c)'

createRadialGradient('#9b59b6', {
  shape: 'circle',
  size: 'closest-side',
  position: '30% 60%',
  offsetPercent: 30,
})

From explicit color stops ​

ts
createRadialGradient('#000', {
  colors: [
    { color: '#f39c12', position: '0%' },
    { color: '#e74c3c', position: '50%' },
    { color: '#8e44ad', opacity: 0.5, position: '100%' },
  ],
})

Multiple layers ​

ts
createRadialGradient('#000', {
  layers: [
    {
      shape: 'circle',
      size: '40%',
      position: '30% 40%',
      colors: [{ color: '#f39c12' }, { color: 'transparent' }],
    },
    {
      shape: 'circle',
      size: '30%',
      position: '70% 60%',
      colors: [{ color: '#3498db' }, { color: 'transparent' }],
    },
  ],
})

Color harmony mode ​

ts
// Automatically derive stops from a color harmony
createRadialGradient('#3498db', {
  harmonyType: 'triadic',
  interpolationSpace: 'oklch',
})

createRadialGradient('#e74c3c', {
  harmonyType: 'analogous',
  shape: 'circle',
})

RadialGradientOptions ​

shape ​

'circle' | 'ellipse' · default: 'ellipse'

Gradient shape.

size ​

string | { width, height } · default: 'farthest-corner'

Size keyword or explicit dimensions.

position ​

string · default: 'center'

Center position.

offsetPercent ​

number · default: 15

Brightness offset for auto-generated stops.

fallbackColor ​

string · default: '#f5e477'

Fallback for unsupported color formats.

colors ​

ColorStop[]

Explicit stops (overrides auto-generation).

layers ​

RadialGradientLayer[]

Multiple stacked layers.

repeating ​

boolean · default: false

Use repeating-radial-gradient.

harmonyType ​

'complementary' | 'triadic' | 'tetradic' | 'analogous'

Auto-generate stops from a color harmony.

interpolationSpace ​

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

Color space for JS-side interpolation.

Radial Gradient Layers ​

createRadialGradientLayers(baseColor, options?)

Utility that generates a set of RadialGradientLayer objects with evenly distributed sizes and harmony-derived colors. Produces a nested multi-ring radial effect when passed to createRadialGradient.

ts
import { createRadialGradientLayers, createRadialGradient } from 'css-magic-gradient'

const layers = createRadialGradientLayers('#3498db', {
  count: 4,
  harmonyType: 'triadic',
  interpolationSpace: 'oklch',
  minSizePercent: 20,
  maxSizePercent: 100,
})

const gradient = createRadialGradient('#3498db', { layers })

count ​

number · default: 3

Number of layers.

minSizePercent ​

number · default: 20

Smallest layer size (%).

maxSizePercent ​

number · default: 100

Largest layer size (%).

harmonyType ​

RadialHarmonyType · default: 'analogous'

Color distribution strategy.

interpolationSpace ​

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

Color space for JS-side interpolation.

position ​

string · default: 'center'

Shared center position.

Conic Gradient ​

createConicGradient(baseColor, options?)

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

// Auto brightness steps (default)
createConicGradient('#3498db', { steps: 10, offsetPercent: 25 })

// Hue rotation across the circle
createConicGradient('#e74c3c', { hueRotation: true, steps: 12 })

// Custom starting angle and position
createConicGradient('#9b59b6', { fromAngle: 45, position: '30% 70%' })

// Explicit color stops
createConicGradient('#000', {
  colors: [
    { color: '#ff6b6b', position: '0%' },
    { color: '#feca57', position: '25%' },
    { color: '#48dbfb', position: '75%' },
    { color: '#ff6b6b', position: '100%' },
  ],
})

// Color harmony mode — interpolates harmony colors around the full circle
createConicGradient('#e74c3c', { harmonyType: 'triadic', steps: 24 })
createConicGradient('#3498db', { harmonyType: 'tetradic', interpolationSpace: 'oklab' })

// Color scale mode — interpolates through an arbitrary list of colors
createConicGradient('#000', {
  colorScale: ['#ff0000', '#00ff00', '#0000ff'],
  steps: 36,
})

// Repeating variant
createConicGradient('#2ecc71', { repeating: true, steps: 4, offsetPercent: 30 })

ConicGradientOptions ​

fromAngle ​

number · default: 0

Starting angle in degrees.

position ​

string · default: '50% 50%'

Gradient center.

hueRotation ​

boolean · default: false

Rotate hue instead of adjusting brightness.

harmonyType ​

'complementary' | 'triadic' | 'tetradic' | 'analogous'

Generate from a color harmony.

colorScale ​

string[]

Interpolate through arbitrary colors around the circle.

interpolationSpace ​

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

Color space for JS-side interpolation.

steps ​

number · default: 8

Number of generated stops.

offsetPercent ​

number · default: 20

Brightness offset for auto-generated stops.

colors ​

ColorStop[]

Explicit stops.

fallbackColor ​

string · default: '#f5e477'

Fallback color.

repeating ​

boolean · default: false

Use repeating-conic-gradient.

Rainbow Conic Gradient ​

createRainbowConicGradient(options?)

Generates a full-spectrum rainbow by cycling through all hues in HSL space.

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

createRainbowConicGradient()
createRainbowConicGradient({ steps: 24, saturation: 90, lightness: 55, fromAngle: 90 })
createRainbowConicGradient({ repeating: true, steps: 6 })