CSS Gradient Generator
Design linear, radial and conic CSS gradients with up to 8 colour stops and opacity, start from presets, copy the CSS or download a 1920×1080 PNG.
Presets
CSS
background: #ff7e5f;
background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);Linear, radial and conic gradients work in every current browser. Generated in your browser.
This tool is temporarily unavailable.
Please check back later.
How to use this tool
- 1Pick a preset or keep the default gradient.
- 2Choose linear, radial or conic, and set the angle or shape.
- 3Adjust each colour stop’s colour, position and opacity; add up to 8 stops.
- 4Copy the CSS, or download the gradient as a PNG image.
Features
- Linear, radial (circle or ellipse) and conic gradients.
- Up to 8 colour stops with individual opacity.
- Eight presets to start from.
- CSS with a solid-colour fallback, copied in one click.
- 1920×1080 PNG export for wallpapers and slides.
Privacy
The gradient is generated in your browser.
Frequently asked questions
How do I use the CSS?
Paste the two lines into the rule for your element, e.g. .hero { … }. The first line is a solid fallback; the second is the gradient.
Which browsers support conic gradients?
All current versions of Chrome, Edge, Firefox and Safari. Very old browsers fall back to the solid colour.
How do I make a hard colour edge?
Put two stops at the same position, e.g. red at 50% and blue at 50%, for a sharp stripe instead of a blend.
Can I make a transparent gradient?
Yes. Lower a stop’s opacity and the CSS uses rgba(), so the gradient fades into whatever is behind it.