CSS Gradient Generator
Create linear and radial CSS gradients with a live preview and copy ready-to-use code.
Add up to 6 colors and adjust their position in the gradient.
CSS
Ready-to-copy code
What is a CSS gradient generator?
A CSS gradient is a smooth transition between two or more colors, defined with the linear-gradient or radial-gradient function. This generator lets you create the gradient visually — choosing direction, angle, colors and position — and automatically produces the CSS code ready to paste into your stylesheet. No need to memorize the syntax: pick, adjust and copy.
How to use this tool
- Choose between a linear or radial gradient with the top tabs.
- Set the direction or angle and add the colors you need.
- Watch the live preview and adjust until you like the result.
- Copy the CSS code and use it in your project.
Design tips
- Gradients with more than two colors create richer effects; try 3 or 4 for hero backgrounds.
- Use colors with similar lightness for harmonious transitions, or strong contrasts for visual impact.
- Apply gradients to backgrounds, buttons, text (with background-clip) and borders to modernize any interface.
Frequently asked questions
What is the difference between linear-gradient and radial-gradient?
linear-gradient transitions in a straight line along a direction or angle; radial-gradient expands from a central point as a circle or ellipse. Linear is ideal for page backgrounds; radial for highlighting a focus or mimicking light.
Does the generated code work in all browsers?
Yes. The unprefixed linear-gradient and radial-gradient functions are supported in all modern browsers since 2020.