Use Gradient Generator

Enter your data below to use the Gradient Generator

📌 Try these examples:
RESULT

Last updated

Popular Gradient Presets

Examples

Example 1: Linear Gradients

/* Left to right */
background: linear-gradient(to right, #667eea, #764ba2);

/* Top to bottom */
background: linear-gradient(to bottom, #f093fb, #f5576c);

/* Diagonal (45 degrees) */
background: linear-gradient(45deg, #4facfe, #00f2fe);

/* Custom angle */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Three color stops */
background: linear-gradient(to right, #f093fb 0%, #f5576c 50%, #4facfe 100%);

Example 2: Radial Gradients

/* Basic radial — center outward */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse shape */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Custom center position */
background: radial-gradient(circle at 30% 70%, #4facfe, #00f2fe);

/* Sized radial gradient */
background: radial-gradient(circle 200px at center, #667eea, transparent);

/* Multiple stops */
background: radial-gradient(circle, #fff 0%, #667eea 40%, #764ba2 100%);

Example 3: Conic Gradients

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart effect */
background: conic-gradient(
  #4facfe 0% 25%,
  #f093fb 25% 50%,
  #f5576c 50% 75%,
  #667eea 75% 100%
);

/* Starburst / sunburst */
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

/* Custom start angle */
background: conic-gradient(from 45deg at 50% 50%, #f093fb, #f5576c, #4facfe, #f093fb);

Frequently Asked Questions

Simply enter your data, click the process button, and get instant results. All processing happens in your browser for maximum privacy and security.

Yes! Gradient Generator is completely free to use with no registration required. All processing is done client-side in your browser.

Absolutely! All processing happens locally in your browser. Your data never leaves your device, ensuring complete privacy and security.