CSS Gradient Generator – Free Online Tool
Create CSS gradients with this free online generator. Choose between linear, radial, and conic gradients, customize colors and directions, and see a live preview. Copy the generated CSS and use it in your website or application.
Choose up to 8 colors. Positions are percentages from 0 to 100.
What is a CSS gradient?
A CSS gradient creates a smooth transition between two or more colors. Gradients can be used as backgrounds without downloading or hosting an image. They adapt to the size of their element and are supported in modern browsers.
Types of CSS gradients
- Linear gradients transition colors along a straight line. Change the angle to control the direction.
- Radial gradients transition colors outward from a central point in a circular shape.
- Conic gradients transition colors around a center point, like the segments of a color wheel.
How to create a CSS gradient
- Choose a gradient type.
- Select the colors and adjust their positions.
- For linear or conic gradients, change the angle if needed.
- Preview the result and click Copy CSS.
- Paste the declaration into a CSS rule for your element.
- For example:
.my-background {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
Frequently asked questions
Can a CSS gradient use more than two colors?
Yes. Add more color stops to create transitions between several colors. This generator supports up to eight stops.
Do CSS gradients require an image?
No. CSS gradients are rendered by the browser and can be used directly as a CSS background.
Can I use a CSS gradient on buttons or text?
Yes. Use the generated background declaration on buttons or other elements. Gradient text requires additional properties such as background-clip: text.
Do CSS gradients work in modern browsers?
Linear, radial, and conic gradients are supported in modern browsers. For older browsers, consider a solid background color as a fallback.
Last updated: