CSS gradient generator online
Drag colour stops, spin the angle, and copy production-ready CSS for linear, radial and conic gradients.
Runs entirely in your browser. Nothing is sent anywhere.
Gradient type
How to use the CSS gradient generator
- Pick a gradient type. Linear runs along a straight line, radial spreads out from a point, and conic sweeps around one like a pie chart.
- Set the direction. Linear gradients get an angle in degrees, where 0 points up and 90 points right. Radial and conic gradients get a shape and origin instead.
- Adjust your colour stops. Each row has a colour swatch and a position from 0 to 100 percent. Add as many as you need, or remove one with the button on its row.
- Copy the CSS. The output is a single background-image declaration you can paste into any stylesheet, a WordPress customiser box, or an inline style attribute.
What you can use it for
Hero sections and page headers are the most common home for a gradient. A two-stop gradient in your brand colours behind white text gives a section presence without needing a photograph, and it costs nothing in page weight because it is drawn by the browser rather than downloaded.
Buttons and cards use gradients more subtly. A gradient with two very close shades of the same colour reads as a soft sheen rather than a colour change, and that small amount of depth is often what separates a button that looks designed from one that looks like a default.
Overlays over images are the practical workhorse. A linear gradient from transparent to a dark colour, laid over a photograph, makes text on top of it readable regardless of what is in the photo. This is the technique behind almost every hero image with a headline on it.
Conic gradients quietly solved a real problem. Before them, a pie chart or a circular progress ring needed SVG or a canvas. A conic gradient with hard colour stops draws one in a single CSS declaration, with no markup and no script.
Things to know
Gradients are background images, not background colours. They belong in the background-image property, and that means you can layer them — a subtle gradient over a photograph, or two gradients over each other, separated by commas. It also means background-color is still available underneath as a fallback.
Angles in CSS gradients are measured clockwise from pointing up, which catches people out. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom. This is not the same convention as the one used in trigonometry or in SVG.
Two stops at the same position produce a hard edge rather than a blend. That is how you make stripes, a two-tone background, or the segments of a conic pie chart. It is a genuinely useful trick that most people discover by accident.
Gradients between very different hues can pass through a muddy middle. Blue to yellow goes through a dull green because the interpolation runs through the middle of RGB space. Adding a deliberate third stop in the middle, in a colour you actually want, fixes it — or pick two colours that are closer together on the wheel.
Frequently asked questions
Press "Add a stop" for each extra colour and set its position. CSS allows as many stops as you like. Three or four is usually the practical maximum before a gradient starts to look busy rather than rich.
Banding happens when a gradient spans a large area with very little colour difference, so the display cannot render enough intermediate steps. Increasing the contrast between the stops, reducing the area, or adding a faint noise texture over the top all reduce it.
Linear and radial gradients have worked everywhere without a prefix for over a decade. Conic gradients need Chrome, Edge, Firefox 83 or Safari 12.1 and later, which covers essentially all traffic now. If you support very old browsers, set a plain background-color first as a fallback and the gradient after it.
Yes, with a small trick: set the gradient as the background of the element, then apply background-clip: text and a transparent text colour. Copy the gradient from here and add those two properties. Always check the contrast, since gradient text can become unreadable where the light end sits over a light background.
For flat colour transitions, decisively. A gradient is a few dozen bytes of CSS that renders instantly at any size and stays sharp on any display. An image doing the same job is a network request, a file to cache, and a fixed resolution.