CSS Gradient Generator

Implementation

type GradientType = 'linear' | 'radial' | 'conic';

interface ColorStop {
  color: string;
  position: number; // 0-100
}

interface GradientConfig {
  type: GradientType;
  angle?: number;          // linear: degrees (0-360)
  shape?: 'circle' | 'ellipse'; // radial
  position?: string;       // radial/conic center, e.g. "center" or "at 50% 50%"
  stops: ColorStop[];
}

interface Preset {
  name: string;
  config: GradientConfig;
}

// --- Core generators ---

function generateLinear(angle: number, stops: ColorStop[]): string {
  const stopStr = stops
    .map(s => `${s.color} ${s.position}%`)
    .join(', ');
  return `linear-gradient(${angle}deg, ${stopStr})`;
}

function generateRadial(
  shape: 'circle' | 'ellipse',
  position: string,
  stops: ColorStop[]
): string {
  const stopStr = stops
    .map(s => `${s.color} ${s.position}%`)
    .join(', ');
  return `radial-gradient(${shape} at ${position}, ${stopStr})`;
}

function generateConic(
  angle: number,
  position: string,
  stops: ColorStop[]
): string {
  const stopStr = stops
    .map(s => `${s.color} ${s.position}%`)
    .join(', ');
  return `conic-gradient(from ${angle}deg at ${position}, ${stopStr})`;
}

// --- Unified CSS output ---

function generateGradientCSS(config: GradientConfig): string {
  const { type, stops } = config;

  let gradient: string;
  switch (type) {
    case 'linear':
      gradient = generateLinear(config.angle ?? 135, stops);
      break;
    case 'radial':
      gradient = generateRadial(
        config.shape ?? 'circle',
        config.position ?? 'center',
        stops
      );
      break;
    case 'conic':
      gradient = generateConic(
        config.angle ?? 0,
        config.position ?? 'center',
        stops
      );
      break;
  }

  return `.gradient {
  background: ${gradient};
}`;
}

// --- Preset collections ---

const presets: Record<string, Preset> = {
  sunset: {
    name: 'Sunset',
    config: {
      type: 'linear', angle: 135,
      stops: [
        { color: '#ff512f', position: 0 },
        { color: '#f09819', position: 50 },
        { color: '#dd2476', position: 100 },
      ],
    },
  },
  ocean: {
    name: 'Ocean',
    config: {
      type: 'linear', angle: 180,
      stops: [
        { color: '#2193b0', position: 0 },
        { color: '#6dd5ed', position: 100 },
      ],
    },
  },
  forest: {
    name: 'Forest',
    config: {
      type: 'linear', angle: 160,
      stops: [
        { color: '#134e5e', position: 0 },
        { color: '#71b280', position: 100 },
      ],
    },
  },
  neon: {
    name: 'Neon',
    config: {
      type: 'linear', angle: 90,
      stops: [
        { color: '#ff00ff', position: 0 },
        { color: '#00ffff', position: 50 },
        { color: '#ff00ff', position: 100 },
      ],
    },
  },
  aurora: {
    name: 'Aurora',
    config: {
      type: 'radial', shape: 'ellipse', position: '50% 50%',
      stops: [
        { color: '#0f2027', position: 0 },
        { color: '#203a43', position: 40 },
        { color: '#2c5364', position: 70 },
        { color: '#00c9ff', position: 100 },
      ],
    },
  },
  candy: {
    name: 'Candy',
    config: {
      type: 'conic', angle: 0, position: 'center',
      stops: [
        { color: '#ff6b6b', position: 0 },
        { color: '#feca57', position: 25 },
        { color: '#48dbfb', position: 50 },
        { color: '#ff9ff3', position: 75 },
        { color: '#ff6b6b', position: 100 },
      ],
    },
  },
};

// Usage
const css = generateGradientCSS(presets.sunset.config);
const neonBg = generateLinear(90, presets.neon.config.stops);

Usage

Use generateGradientCSS() with a config object, or pick from presets (sunset, ocean, forest, neon, aurora, candy). Use generateLinear(), generateRadial(), or generateConic() directly for individual gradient strings.

Examples