🚀 Wow1

CSS Gradient Generator

Create stunning linear, radial & conic gradients with live preview

Type

Direction

135°

Colors

Color Stops

Click bar to add · Drag to move

2/10

Advanced

Repeat

How to Use

  1. 1 Choose gradient type: Linear, Radial, or Conic
  2. 2 Adjust angle/position by clicking on the preview or using controls
  3. 3 Add, remove, or drag color stops on the gradient bar
  4. 4 Click a color stop to change its color with the color picker
  5. 5 Copy CSS code or Tailwind classes, or download as PNG

What You Get

Create professional CSS gradients with 3 gradient types, color space interpolation (sRGB/OKLCH), 25+ curated presets, and multiple export options.

Input: Select "Linear" + 135° angle + purple to pink

Output: background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Input: Select "Conic" + center position + rainbow colors

Output: background: conic-gradient(from 0deg at 50% 50%, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors. CSS supports linear (straight line), radial (circular), and conic (angular) gradients.

What is the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line. Radial gradients radiate from a center point outward. Conic gradients rotate colors around a center point like a pie chart.

What is OKLCH color space?

OKLCH is a perceptually uniform color space. Gradients in OKLCH appear smoother because color transitions match how humans perceive color, avoiding muddy midtones.

How do I add more colors to my gradient?

Click anywhere on the gradient bar to add a new color stop. You can add up to 10 color stops. Click a stop to select it and change its color.

Can I use these gradients in Tailwind CSS?

Yes! Click "Copy Tailwind" to get Tailwind utility classes. For simple 2-3 color linear gradients, you get native classes. For complex gradients, you get an inline style.

Is my data private?

Yes, 100% private. This tool runs entirely in your browser. No data is sent to any server.

All gradient creation happens in your browser. No data is ever sent to any server.