CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually, then copy production-ready CSS or download a PNG. Everything updates instantly as you edit.
Download as PNG
PNG export for conic gradients isn't supported in this browser.
How to use the gradient generator
- Choose a gradient type: linear, radial, or conic.
- Adjust the angle or position, and edit color stops — add up to 8, drag their position, or type an exact HEX value.
- Copy the full CSS declaration, the gradient value alone, or just the list of HEX colors.
- Optionally download the gradient as a PNG at a preset or custom size.
What CSS gradients are
A CSS gradient is a smooth transition between two or more colors, rendered directly by the browser — no image file required, which keeps pages fast and gradients crisp at any size.
Linear vs. radial vs. conic
Linear gradients transition along a straight line at any angle — the most common style, used for backgrounds, buttons, and overlays. Radial gradients spread outward from a center point in a circle or ellipse, useful for spotlight or vignette effects. Conic gradients sweep around a center point like a color wheel, which makes them well suited to pie charts, loaders, and hue pickers.
How to use the generated CSS
Paste the full declaration directly into a CSS rule's background property, or use the gradient value alone if you're combining it with other background layers (for example, a gradient over an image).
Browser support and practical tips
Linear and radial gradients are supported in every browser this site targets. Conic gradients are supported in all current versions of Chrome, Edge, Firefox, and Safari. For text-friendly contrast, keep gradients behind large text rather than small text, and test your gradient in both light and dark mode if your design adapts to system theme.
Frequently asked questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, rendered directly by the browser with no image file. Linear gradients transition along a straight line, radial gradients spread outward from a point, and conic gradients sweep around a center point like a color wheel.
Which browsers support conic gradients?
All current versions of Chrome, Edge, Firefox, and Safari support conic-gradient(). Linear and radial gradients have been supported for much longer and work everywhere.
Can I have more than two colors in a gradient?
Yes — this tool supports 2 to 8 color stops, each with its own position from 0% to 100%.
Does downloading a PNG upload my gradient anywhere?
No. The PNG is drawn locally using the Canvas API and saved directly from your browser.