CSS Gradient Generator – Free Online Tool
Create linear, radial, and conic CSS gradients with a live preview. Customize colors and directions, then copy the generated CSS into 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. Unlike static images, CSS gradient backgrounds 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 gradient 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 gradient colors and adjust their color stop positions.
- For linear or conic gradients, change the angle if needed.
- Preview the result and click Copy CSS.
- Paste the CSS background 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 **CSS gradient generator** supports up to eight color 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.
Related tools
- CSS border radius generator — Create rounded corners and custom shapes with a live preview.
- CSS box shadow generator — Create layered box shadows with sliders and presets.
Last updated: