Free CSS Gradient Generator
Design modern linear/radial CSS gradients with live codes. No registration, runs 100% locally in your browser.
Gradient Settings
Take screenshots and annotate directly in your browser
Why use manual online uploaders? With the free Supashot Chrome Extension, capture any visible page, selected region, crop, highlight, blur, and copy instantly without leaving your tab.
How CSS Gradient Generator Works
Select Linear or Radial style, and customize the angle (in degrees).
Add, remove, or drag color stops to design your blend.
Copy the output cross-browser CSS `background: linear-gradient(...)` string instantly.
Frequently Asked Questions
Yes! The generator outputs standard standard CSS gradients that are highly supported by all modern browsers, along with solid color fallbacks.
Yes! Simply click anywhere on the gradient color track to add a new color stop slider, which you can drag and colorize individually.
Yes, each color stop has full RGBA controls, letting you design smooth fades to transparent.
Yes, we bundle beautiful, handpicked premium modern gradients to spark your inspiration instantly.