CSS Gradient Generator — Linear, Radial & Conic Gradients Free
Generate CSS gradients visually free — linear, radial and conic — with a live preview and adjustable colour stops. Copy the CSS or Tailwind class instantly, or export a PNG. Runs entirely in your browser.
Last updated: June 2026
Shape
Colour stops
Presets
CSS
Tailwind CSS
About this tool
Design beautiful CSS gradients without the guesswork
Gradients add depth and personality to a design, but hand-writing the CSS — getting the angle, the stops and the positions just right — is fiddly. A CSS gradient generator lets you build them visually instead: pick your colours, drag their positions, set the direction, and the exact CSS appears, ready to paste. This tool covers all three gradient types in one place.
Linear gradients blend colours along a line at any angle from 0 to 360 degrees, with one-click direction presets. Radial gradients radiate from a centre point you can position anywhere, as a circle or an ellipse. Conic gradients sweep colours around a centre like a pie chart or colour wheel. For each, you control between two and eight colour stops with individual colour pickers and position sliders.
The ready-made presets — Sunset, Ocean, Forest, Purple Rain and more — give you a polished starting point you can then customise. Copy the result as a standard CSS background declaration or as a Tailwind arbitrary-value class, or export the gradient as a PNG for use in slides and social cards. Everything is generated locally in your browser using plain CSS and the Canvas API, with no account, no limits and nothing uploaded.
How it works
Three quick steps — no account, nothing uploaded to a server.
Pick a type
Choose linear, radial or conic and set the angle or position.
Add colour stops
Pick colours and drag their positions — the preview updates live.
Copy or export
Copy the CSS or Tailwind class, or download a PNG.
FAQ
Frequently asked questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colours, generated by the browser without any image file. There are three kinds: linear gradients blend colours along a straight line at a chosen angle, radial gradients radiate out from a centre point, and conic gradients sweep around a centre like a colour wheel. Because they're code, gradients scale to any size, load instantly and are easy to tweak.
How do I create a CSS gradient?
Pick a gradient type, choose your colours as 'stops' and set where each one sits, then adjust the angle or position. This generator does it visually: add or remove colour stops, drag their positions, set the angle, and watch the live preview update. When you're happy, copy the generated CSS — a single background or background-image declaration you paste straight into your stylesheet.
What are colour stops?
Colour stops define the colours in a gradient and the point along the gradient (from 0% to 100%) where each one is fully shown. Two stops give a simple two-colour blend; adding more lets you build rich multi-colour transitions. This tool supports between 2 and 8 stops, each with its own colour picker, hex field and position slider, so you can fine-tune exactly how the colours flow.
Can I use these gradients with Tailwind CSS?
Yes. Alongside the standard CSS, the generator outputs a Tailwind arbitrary-value class — for example bg-[linear-gradient(...)] with spaces escaped — that you can drop straight onto an element. It's handy when you want a one-off custom gradient that isn't part of your theme's predefined gradient utilities.
Can I download the gradient as an image?
Yes. Click 'Download PNG' to export the current gradient as a 1200×630 PNG, rendered with the browser's Canvas API to match the CSS. That's useful for social cards, slide backgrounds or anywhere you need a raster image rather than live CSS. Everything is generated locally — nothing is uploaded.
Related developer tools
You might also need these.