Gradient Generator
Design smooth linear or radial CSS gradients with a live preview. Add up to 4 color stops, adjust the angle, copy the ready-made CSS, or export your gradient as a PNG image.
How to Use the Gradient Generator
- Choose Linear or Radial as your gradient type.
- For linear gradients, drag the angle slider to set the direction.
- Adjust each color stop's color and position, or add up to 4 stops total.
- Copy the generated CSS and paste it straight into your stylesheet.
- Click "Export as PNG" to download the gradient as an image file.
Why Use This Tool?
Does the CSS output work everywhere?
Yes. The generated CSS uses standard linear-gradient() and radial-gradient() functions supported by every modern browser, with percentage-based color stops so the gradient scales correctly at any element size. Simply paste the output into a background or background-image property.
How does the PNG export work?
When you click "Export as PNG," the tool redraws your exact gradient onto an HTML canvas using the real createLinearGradient or createRadialGradient canvas APIs — including your chosen angle and every color stop's position — then lets you download it as a standalone image file, useful for design mockups, social graphics, or anywhere you need a flat image instead of live CSS.
How many color stops can I use?
You can use between 2 and 4 color stops. Two stops create a simple two-tone gradient; three or four stops let you build richer, multi-color transitions like sunset skies or vibrant brand gradients, each with independently adjustable position.
Is this free and does it save my data?
This tool is completely free for personal and commercial use, with no signup required. It runs 100% in your browser — no gradient, color, or image is ever uploaded to a server, so your work stays private.