What's the difference between linear, radial, and conic gradients?

A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions outward from a center point in a circle. A conic gradient sweeps colors around a center point like a color wheel, useful for pie charts and spinners.

How many color stops can I add?

Up to 8 stops. Each stop has its own color and position (0-100%), so you can build anything from a simple two-color fade to a multi-color rainbow.

Can I use this CSS directly in my stylesheet?

Yes. Copy the generated `background: ...;` line and paste it into any CSS rule, inline style, or Tailwind arbitrary value.

Is anything uploaded or saved?

No. The gradient is calculated and rendered entirely in your browser with JavaScript — nothing is uploaded, logged, or stored.

CSS GRADIENT GENERATOR

Build linear, radial, and conic gradients with a live preview — calculated right here in your browser.

Type

Angledeg

Color Stops

Presets

CSS

background: linear-gradient(90deg, #ff6a35 0%, #ffe17d 100%);

How to build a gradient

1
Choose a gradient type: linear, radial, or conic.
2
Drag the angle slider to set the direction (linear and conic gradients).
3
Add, remove, or drag color stops, and edit each stop's color and position.
4
Pick a preset for a quick starting point, or randomize the stops for inspiration.
5
Click Copy to grab the generated CSS and paste it into your stylesheet.

Questions

What's the difference between linear, radial, and conic gradients?: A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions outward from a center point in a circle. A conic gradient sweeps colors around a center point like a color wheel, useful for pie charts and spinners.
How many color stops can I add?: Up to 8 stops. Each stop has its own color and position (0-100%), so you can build anything from a simple two-color fade to a multi-color rainbow.
Can I use this CSS directly in my stylesheet?: Yes. Copy the generated `background: ...;` line and paste it into any CSS rule, inline style, or Tailwind arbitrary value.
Is anything uploaded or saved?: No. The gradient is calculated and rendered entirely in your browser with JavaScript — nothing is uploaded, logged, or stored.