Radial & Conic Gradients

createRadialGradient

From a base color

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

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

Multiple layers

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

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

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

RadialGradientOptions

Option	Type	Default	Description
shape	'circle' | 'ellipse'	'ellipse'	Gradient shape
size	string | { width, height }	'farthest-corner'	Size keyword or explicit dimensions
position	string	'center'	Center position
offsetPercent	number	15	Brightness offset for auto-generated stops
fallbackColor	string	'#f5e477'	Fallback for unsupported color formats
colors	ColorStop[]	—	Explicit stops (overrides auto-generation)
layers	RadialGradientLayer[]	—	Multiple stacked layers
repeating	boolean	false	Use repeating-radial-gradient
harmonyType	'complementary' | 'triadic' | 'tetradic' | 'analogous'	—	Auto-generate stops from a color harmony
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Color space for JS-side interpolation

createRadialGradientLayers

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.

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

Option	Type	Default	Description
count	number	3	Number of layers
minSizePercent	number	20	Smallest layer size (%)
maxSizePercent	number	100	Largest layer size (%)
harmonyType	RadialHarmonyType	'analogous'	Color distribution strategy
interpolationSpace	'rgb' | 'hsl' | 'oklab' | 'oklch'	'oklch'	Color space for JS-side interpolation
position	string	'center'	Shared center position

createConicGradient

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

Option	Type	Default	Description
fromAngle	number	0	Starting angle in degrees
position	string	'50% 50%'	Gradient center
hueRotation	boolean	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'	'oklch'	Color space for JS-side interpolation
steps	number	8	Number of generated stops
offsetPercent	number	20	Brightness offset for auto-generated stops
colors	ColorStop[]	—	Explicit stops
fallbackColor	string	'#f5e477'	Fallback color
repeating	boolean	false	Use repeating-conic-gradient

createRainbowConicGradient

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

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

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