A/B
No signupContrast Checker
Check WCAG color contrast ratios for accessibility.
Open tool▩
Gradient Generator
Design and export CSS gradients visually.
gradient-generator.tool
0%
100%
background: linear-gradient(90deg, #3B6FE0 0%, #1FA85C 100%);
Built entirely in your browser.
What is a gradient generator?
This tool lets you visually build a CSS linear or radial gradient - add color stops, drag their position, adjust the angle, and copy the exact CSS to use in your project.
How to use this tool
- 1Choose Linear or Radial.
- 2For linear gradients, adjust the angle.
- 3Add, remove, or reposition color stops using the color pickers and sliders.
- 4Copy the generated CSS.
Common use cases
Designing a background gradient visually before writing the CSS by hand
Experimenting with multi-color gradients and angle combinations
Generating a quick gradient for a button, hero section, or card background
Getting exact CSS syntax for a gradient you've designed
Good to know
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions along a straight line at a chosen angle; a radial gradient radiates outward from a center point in a circular pattern.
How many color stops can I add?
Up to six, which covers the vast majority of practical gradient designs.
Can I use color names or rgba() instead of hex?
The color picker outputs hex values, but you can manually edit the text field next to it to enter any valid CSS color format.
Is my design sent anywhere?
No - the gradient is built and rendered entirely in your browser.
quick_facts.json
{
"runs_in_browser": true,
"data_sent_to_server": false,
"signup_required": false,
"price": "free",
"category": "Color Tools"
}