Create beautiful CSS gradients with our free CSS Gradient Generator. Choose your colors, adjust the direction and color stops, preview your gradient instantly, and copy the CSS code for your website.
CSS Gradient Generator
Use 2 to 6 colors. Adjust each position slider to control where its color appears.
How to Use the CSS Gradient Generator
- Choose a gradient type: linear, radial, or conic.
- Select your colors using the color picker or enter their HEX values.
- Adjust the direction, starting angle, or color positions.
- Preview your gradient as you make changes.
- Click Copy CSS to copy the code or Download CSS to save it as a file.
Example
Suppose you want a blue-to-purple gradient for a website banner. Choose #1673a5 as the first color and #8b5cf6 as the second color. Select a linear gradient and set the direction to left to right.
The generated CSS will look like this:
background: linear-gradient(to right, #1673a5 0%, #8b5cf6 100%);You can apply this CSS to a banner, button, card, or another element on your website.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient creates a smooth transition between two or more colors. It can be used for website backgrounds, buttons, banners, cards, and other design elements.
What types of gradients does this tool support?
The generator supports linear, radial, and conic gradients. Each type creates a different color transition.
Can I use more than two colors?
Yes. You can add colors and customize their positions, with support for up to six colors in one gradient.
Is this CSS Gradient Generator free?
Yes. You can create gradients, preview the result, copy the generated CSS, and download the code for free.
Do I need to install any software?
No. The generator works directly in your browser. You can use it without creating an account or connecting to an external API.
Can I use the generated CSS on any website?
Yes. You can use the CSS on websites that support modern CSS gradients. The exact appearance depends on where you apply the code and the styles already used on your website.