CSS Gradient Generator
Build linear/radial CSS gradients visually and copy the code.
🔒 Runs entirely in your browser — nothing is uploaded.
How CSS Gradient Generator works
How does the gradient generator build the CSS?
Your color stops are sorted by position and joined into a comma-separated list, then wrapped in linear-gradient() or radial-gradient(). Linear gradients also take an angle in degrees; radial gradients are always generated as a circle shape with no separate angle control.
What would I use a CSS gradient for?
Gradients are typically used for button backgrounds, hero-section overlays, and card accents - dialing in the exact stops and angle visually is faster than guessing hex values by hand and reloading the page to check.
Can I go below two color stops?
No - the Remove button on a stop is hidden once you are down to two, since a gradient needs at least two colors to mean anything. You can add as many extra stops as you want with the "Add color stop" button.