CSS gradient generator
Create color gradients for websites, presentations and social media graphics. Adjust the angle and color stops; copy ready-to-use CSS or download a PNG/SVG background at the size you need.
Free · No sign-up · Runs in your browser
Your files are never uploaded; everything runs in your browser.
How to use
- Choose the gradient type: linear, radial or conic.
- Add color stops and set their color and position.
- Set the angle or pick one of the presets.
- Copy the CSS code or download it as PNG/SVG.
Highlights
- Linear, radial and conic gradients.
- Up to 6 color stops and presets.
- PNG in desktop, square and portrait sizes; vector SVG.
- Shareable link: settings are saved in the page address.
Frequently asked questions
How do you write a CSS gradient?
The most common form is background: linear-gradient(angle, color1 position, color2 position), e.g. linear-gradient(135deg, #1F3FD6 0%, #5B7CFF 100%). The tool writes this code for you.
Where are conic gradients used?
A conic gradient rotates colors around a center point; it's used for pie charts, color wheels and eye-catching backgrounds. All modern browsers support it.
Why do gradients show banding?
When very similar colors are stretched across a large area, the color steps can become visible. Adding more stops, separating the colors a little or adding a subtle grain reduces banding.
Where can I use the downloaded gradient?
Use the PNG for presentations, social media and desktop wallpapers, and the SVG for designs that need to stay sharp at any size.
Need a professional design?
Get in touch for social media design, advertising visuals, posters, logos and brand identity projects.