CSS Gradient Generator
Create beautiful CSS gradients with a live preview. Choose linear, radial or conic type, pick 2 or 3 colors and set the angle — then copy the CSS code.
How to use
- Pick two colors using the color pickers.
- Optionally enable a third color and choose the gradient type and angle.
- The preview updates live — copy the CSS code with one click.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
Linear gradients transition colors along a straight line at a given angle. Radial gradients radiate from a center point outward. Conic gradients rotate colors around a center point like a color wheel.
Can I use more than 3 colors?
This tool supports up to 3 colors. For more complex gradients, copy the CSS and manually add more color stops in your code editor.
What does the angle control?
For linear gradients, the angle sets the direction: 0° is bottom to top, 90° is left to right, 135° is diagonal. For conic gradients, it sets the starting angle of the rotation.
Can I use these gradients commercially?
Yes — CSS gradients are standard browser features. The generated code is yours to use in any project.