CSS Gradient Generator
CSS Gradient Generator: free, fast and private. Works in your browser, nothing is uploaded, no sign-up needed.
How to use
Build smooth CSS gradients visually. Choose linear, radial or conic, set the angle, add up to six color stops and copy the ready-to-use CSS. Gradients are lightweight, scale to any size and need no image files.
- Pick or enter a color.
- Adjust the options and watch the live preview.
- Copy the color or CSS code.
More tools
Frequently asked questions
What is the difference between linear, radial and conic gradients?
Linear gradients blend colors along a straight line, radial gradients spread outward from a center point, and conic gradients sweep around a center like a color wheel.
How do I use the CSS?
Paste the generated line into any CSS rule, for example the background of a section or a button.
Is it free?
Yes. All tools are free, with no sign-up and no limits.
Is my image or data uploaded?
No. Everything runs locally in your browser, so your images and colors stay private.
Can I use the generated CSS in my projects?
Yes. The code is yours to use in personal and commercial projects without attribution.