CSS Gradient Generator
Build linear, radial and conic CSS gradients visually — add color stops, set the angle and copy the CSS (or Tailwind class) with a live preview.
How to use
- 1Choose linear, radial or conic, and set the angle.
- 2Edit, add or remove color stops, then copy the CSS.
Frequently asked questions
Do gradients work in all browsers?
Yes — linear, radial and conic gradients work in all modern browsers without prefixes.
How do I make a hard color stop?
Put two stops at the same position — e.g. red 50%, blue 50% — for a sharp edge.
Are CSS gradients better than images?
Usually — they're resolution-independent, tiny and easy to change.