Gradient Generator

Build CSS Gradients
Visually

Create linear, radial, and conic gradients with an interactive multi-stop bar, drag-and-rotate angle dial, and inline color picker. One click to copy production-ready CSS.

Open Gradient Generator

Three Gradient Types

Switch freely between gradient types at any time — your stops translate automatically so you never lose your work.

  • Linear — direction controlled by angle dial or numeric input (0°–360°)
  • Radial — circular gradient emanating from center, no angle needed
  • Conic — pie-chart style gradient rotating around a center point

Interactive Multi-Stop Drag Bar

The gradient bar is fully interactive. Drag handles to reposition stops. Click anywhere on the bar to add a new stop. Remove stops you no longer need. The bar always renders the gradient live.

  • Click the gradient bar to insert a new color stop at cursor position
  • Drag stop handles left/right to reposition
  • Selected stop's color updates in the inline color picker below
  • Remove a stop with the × button (minimum 2 stops)

Angle Dial & Instant CSS Output

Drag the angle dial or type a degree value directly. The gradient preview updates live. When you're done, one click copies the complete CSS background declaration, ready to paste into your project.

  • Drag knob or type in the degree input (0°–360°)
  • Reset button to restore default gradient
  • CSS output: background: linear-gradient(…)
  • Works for all three gradient types — correct CSS syntax for each

Build Your Perfect Gradient

Linear, radial, conic — build any CSS gradient visually. Copy and paste in seconds.

Open Gradient Generator Free