Gradients are back in modern web design, from hero sections and buttons to social graphics and slide backgrounds, but writing the CSS by hand gets fiddly once you have more than two colours. This free CSS gradient generator lets you design a gradient visually and copy clean, ready-to-paste code. Choose a linear gradient with any angle or a radial gradient (circle or ellipse), add up to six colour stops, and drag each stop's position to control where colours blend. A live preview updates as you go, and the generated background CSS works in every modern browser without vendor prefixes. Start from presets inspired by popular styles, including our own Botvana navy-violet-cyan palette, or hit Random for inspiration. Need an image instead of code? Download the gradient as a PNG at common sizes such as 1920×1080 for desktop wallpapers and slides or 1080×1080 for Instagram posts. Everything is drawn locally with the canvas in your browser, so nothing is uploaded. Design tip: gradients between colours with similar lightness look smoother, while very saturated opposites can create a muddy grey band in the middle; adding a middle stop usually fixes it.
Design a gradient
How to use the gradient generator
- Pick linear or radial, or start from a preset.
- Set the angle and edit colours and positions of each stop.
- Copy the CSS into your stylesheet, or download a PNG.
Linear vs radial
Linear gradients blend along a straight line at the angle you choose (0° goes bottom to top, 90° left to right). Radial gradients spread outward from the centre, which works well for spotlights and soft backgrounds.
FAQ
Does the CSS need -webkit- prefixes?
No. Unprefixed linear-gradient() and radial-gradient() have worked in all major browsers for years.
How many colour stops can I use?
This tool supports up to six, which covers nearly every design. CSS itself allows more.
Why is there a grey band in my gradient?
Blending two saturated opposite colours passes through grey. Add a middle stop with a brighter in-between colour.
Is the PNG uploaded anywhere?
No. It’s drawn on a canvas in your browser and downloaded directly.
Comments
Post a Comment