How do I remove a color stop?

Select the stop and press Delete or Backspace, or use the trash button. A gradient always keeps at least two stops.

Do these gradients work in every browser?

Linear and radial gradients work in all current browsers. Conic gradients work in Chrome, Edge, Firefox and Safari 12.1 or later.

Can I move stops with the keyboard?

Yes. Focus a stop with Tab and use the arrow keys (Shift for steps of 10), Home and End. The angle dial works with the arrow keys too.

CSS Gradient Generator — Linear, Radial & Conic

Create linear, radial and conic CSS gradients with draggable color stops, an angle dial and presets. Copy the CSS or a Tailwind class. Free and instant.

Color stopsClick to add · drag to move

CSS

background: #fa69c3;
background: linear-gradient(120deg, #7f5af0 0%, #ff6ac1 52%, #ffb86b 100%);

Tailwind

bg-[linear-gradient(120deg,#7f5af0_0%,#ff6ac1_52%,#ffb86b_100%)]

Presets

Format references

MDN — CSS gradients
Tailwind CSS — Arbitrary values

Tool page updated: 2026-10-23

Presets

Guide and example

Related tools

Format references