CSS gradient generator

How to use it

1. A gradient is already on screen when the page opens — the first result needs no click.
2. Choose a type: “Linear” goes along an angle, “Radial” spreads from a circle, “Conic” sweeps around a center. Change the angle with the slider for linear and conic.
3. Set the colors with the swatches and drag each position (0–100%). Add more colors with “+ Add color” if you want a multi-stop gradient; remove them down to two.
4. The CSS updates live below — copy it with one click and paste it anywhere that takes CSS.

Example

Linear · 90° · #FF5733 @0% → #33A1FF @100%

linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)

This is a standard linear gradient from #FF5733 on the left to #33A1FF on the right; 90deg means “to the right”. “Radial” gives radial-gradient(circle, #FF5733 0%, #33A1FF 100%), and “Conic” gives conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%). Everything is plain ASCII and pastes into any CSS without changes.

Scope, limits and common questions

• Opaque colors only: the swatches are browser color pickers and show no alpha. For transparency, convert the color to an alpha form first, then come back.
• One standard segment only: linear, radial or conic — no -webkit- prefixes, no layered/multi-background tricks, no radial sizing or center positioning.
• Stops keep the order you add them — they are not auto-sorted, so an out-of-order position makes a hard jump on purpose.
• Between 2 and 8 stops. Dropping to one stop stops the gradient (with a notice) rather than faking one.
• No preset library, no full-page background apply, no share link that carries the gradient — the share button only shares the page URL; nothing is uploaded, stored or written into the URL.
• Angle is meaningless for radial gradients, so the angle control hides and the generated code has no angle.

Related tools

What people usually need next, once they have a gradient.