CSS Gradient Generator – Generate CSS Online (Free Tool)
Free online Gradient Generator tool to create CSS gradients with multiple color stops. Generate linear and radial gradients with live preview. Perfect for web designers.
Example Output
A CSS gradient ready to paste, plus PNG export for use in non-CSS contexts (PowerPoint, social media graphics, hero sections).
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
What is CSS Gradient Generator?
Build linear, radial, or conic CSS gradients visually — drag colour stops, set angles, preview live, then copy production-ready CSS. Or export as a PNG for use in Figma, slides, or anywhere you can't use CSS. Supports up to 5 stops with precise position control.
Why use this tool?
- Instant results — no waiting on a server or upload progress bar
- Touch-friendly UI, fine on phones for on-the-go edits
- No registration, account, or installation required
- WCAG contrast checks calculated correctly for AA and AAA, both text and large text
- Outputs valid CSS, Tailwind, and design-tool color formats side-by-side
How to use
- Pick 2-5 colour stops
- Choose direction (linear angle / radial / conic)
- Drag stops on the gradient bar to adjust position
- Copy as CSS, SVG, or PNG export
Examples
Hero-section background
A 135° linear gradient from indigo to purple becomes the dramatic background of a landing-page hero.
Button glow
A subtle radial gradient at 50% 0% lights a button from the top, mimicking a soft top-down light.
Conic loading indicator
A conic gradient produces a circular hue-wheel loader for a creative spinner.
Common use cases
- Landing-page hero backgrounds
- Button and card surface treatments
- Decorative dividers and section breaks
- Data-visualisation colour scales
- Avatar / placeholder backgrounds
Troubleshooting
- Gradient has visible banding
- Two stops are too close in hue/luminance. Add an intermediate stop, or use a wider colour range. Browser anti-aliasing helps but can't hide extreme banding.
- Gradient looks different across browsers
- Modern browsers all support the standard syntax — but old Safari needed `-webkit-` prefix. Enable "vendor prefixes" if you target legacy browsers.
- PNG export looks blocky
- Default export is 1920×1080. Bump to 4K (3840×2160) for hero use, or pick the exact pixel size you need.
Frequently Asked Questions
Linear gradients transition colors along a straight line (can be angled). Radial gradients transition colors from a center point outward in a circular pattern. Both can use multiple color stops.
Try these related tools
Explore more Color Tools
Discover other free, privacy-first tools in Color Tools.