1 Gradient Type
2 Gradient Colors
3 Gradient Direction (Angle)
5 Live Preview
CSS Gradient Generator
Create beautiful gradients for your website
6 Generated CSS Code
7 Preset Gradients
How it works
Create your CSS gradient in three simple steps
🖌Choose Type & ColorsSelect gradient type, pick colors and adjust settings.
›⚙CustomizeSet direction, size, opacity and more options.
›⌘Copy & UseCopy the CSS code and use it in your project.
Frequently Asked Questions
Answers to common questions about our CSS Gradient Generator.
Is the CSS Gradient Generator free?
Yes, it is completely free and requires no registration.
Which gradient types are supported?
Linear, radial, conic and repeating gradients are supported.
Can I use the generated CSS on my website?
Yes. Copy the CSS and paste it into your website stylesheet.
Can I add more than two colors?
Yes. Add and remove color stops and customize each stop position.
Can I download the gradient as an image?
Yes. Download a PNG image of the current gradient.
Does my gradient get uploaded?
No. The gradient is generated entirely in your browser.