Build linear, radial, and conic CSS gradients with stops and angles. Fully client-side — no account, uploads, or remote storage.
Added Apr 18, 2026 · Updated Apr 21, 2026
Input
Result
Enter a value for gradient type to see your result.
Generates CSS gradient code (linear or radial) from two or three colour stops. Copy the output directly into your stylesheet.
A three-stop gradient going left to right from indigo through purple to pink, rendered as a CSS background-image property.
Inputs
Result
Use the 'background' shorthand from the output, e.g. background: linear-gradient(to right, #6366f1, #ec4899); in your CSS. Apply it to any element.