Gradient Generator
FreeCreate CSS linear and radial gradients with color stops and copy CSS code
gradientcsslinearradialgenerate
All Color ToolsRelated tools
How it works
1
Configure
Choose gradient type, direction, and add color stops using the visual editor.
2
Preview
See the gradient update in real time as you adjust colors, positions, and angle.
3
Copy
Copy the generated CSS gradient code and paste it directly into your stylesheet.
Frequently asked questions
What types of gradients can I create?+
You can create linear, radial, and conic gradients. Each type supports multiple color stops and you can control the direction or center point.
Can I add more than two color stops?+
Yes. You can add as many color stops as you need. Click on the gradient bar to add a new stop and drag it to position it precisely.
Does the tool generate standard CSS?+
Yes. The output is valid CSS using the linear-gradient, radial-gradient, or conic-gradient functions supported by all modern browsers.
Does this tool require an internet connection?+
Only to load the page initially. After that, the gradient editor runs entirely in your browser with no server communication.
Can I use transparency in my gradient?+
Yes. Each color stop supports an alpha channel, so you can create gradients that fade to transparent. The CSS output uses RGBA or HSLA values accordingly.