CSS Gradient Generator
Free CSS gradient generator for linear, radial and conic gradients. Drag color stops, set the angle, start from presets and copy clean CSS. Private, no sign-up.
- No upload — 100% private
- Instant, on your device
- Free, no sign-up
- Works offline once loaded
How it works
How to use CSS Gradient Generator
Choose linear, radial or conic, then set the angle or center position.
Drag the handles on the stop bar, or click the bar to add a new stop at that point.
Select a stop to change its color or type an exact position.
Try a preset or hit Randomize for inspiration.
Click Copy CSS and paste it into your stylesheet.
Why use it
Why use our CSS Gradient Generator tool
Three gradient types
Linear with any angle, radial circles or ellipses, and conic sweeps from any starting angle.
Up to 10 color stops
Add, remove and drag stops precisely, with keyboard arrows for single-percent nudges.
Big live preview
See every change instantly on a large canvas before you copy the code.
Safe fallback
The CSS includes a solid background color first, averaged from your stops, for very old browsers.
Presets & randomizer
A gallery of tasteful starting points plus a random generator tuned for pleasant hues.
FAQ
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at an angle. A radial gradient spreads out from a center point as a circle or ellipse. A conic gradient rotates colors around a center point, like a color wheel or pie chart.
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser. Conic gradients are supported in all current versions of Chrome, Edge, Safari and Firefox. The generated solid fallback color covers anything older.
How do I make a hard edge between two colors?
Place two stops at the same position — for example red at 50% and blue at 50%. The colors switch sharply instead of blending, which is handy for stripes.
Can I use the gradient as text color?
Yes. Copy the gradient value, set it as background on the text element, then add background-clip: text and color: transparent.
Are gradients better than background images for performance?
Usually. A CSS gradient is a few bytes of code, scales to any screen without blurring and needs no extra network request.
Related tools
Color Palette Generator
Press space for beautiful 5-color palettes. Lock, tweak, export.
Color Converter
Convert any color to HEX, RGB, HSL, HSV, CMYK and OKLCH.
Contrast Checker
Check WCAG AA/AAA contrast and fix failing colors in one click.
Favicon Generator
Make favicon.ico, app icons and the HTML tags in one click.