CSS Gradient Generator
Design a gradient by eye and take the CSS with you. Pick the type, add as many colours as you like, drag the angle, and the preview and the code update together.
- Runs in your browser
- No sign-up
- Free to use
Gradient
Colour stops
How to use CSS Gradient Generator
- Choose linear, radial or conic, or start from one of the presets.
- Set the colours and the position of each colour stop; add or remove stops as needed.
- Adjust the angle, or the shape and centre for radial and conic gradients.
- Copy the CSS or download it as a file.
CSS Gradient Generator features
Three gradient types
Linear, radial and conic, each with its own controls.
Up to eight colour stops
Every stop has a colour and a position, and the stops are sorted automatically.
Repeating gradients
Turn any gradient into a repeating pattern such as stripes or rings.
Fallback colour
The code includes a solid background first, for the rare browser that cannot draw the gradient.
Presets and random
Start from a ready palette or generate a random harmonious gradient.
Exact preview
The preview is styled with the very code you copy.
When to use CSS Gradient Generator
- Hero sections and page backgrounds.
- Buttons, cards and badges that need more depth than a flat colour.
- Striped or ringed patterns made without image files.
- Colour wheels and pie-like charts using conic gradients.
CSS Gradient Generator FAQ
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at an angle you choose. A radial gradient spreads outward from a centre point in a circle or ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which makes colour wheels and pie segments possible.
How does the angle work?
In a linear gradient, 0deg points upward, 90deg to the right, 180deg downward and 270deg to the left; the colours run in that direction. In a conic gradient the angle is where the sweep starts.
What are colour stops?
Each stop is a colour with a position along the gradient, from 0% at the start to 100% at the end. Between two stops the colours blend smoothly. Placing two stops at the same position creates a hard edge instead of a blend.
Do gradients work in all browsers?
Linear and radial gradients have been supported everywhere for many years without prefixes. Conic gradients work in all current browsers. The generated code starts with a plain background colour as a fallback.
Why does my gradient look banded?
Bands appear when two similar colours are stretched over a large area, because there are not enough distinct shades in between. Using colours that differ more, adding an intermediate stop, or overlaying a subtle noise texture reduces the effect.
Can I use a gradient on text?
Yes. Apply the gradient as the background of the text element, then add background-clip: text together with a transparent text colour. The gradient then shows through the letters.
How CSS gradients are built
A CSS gradient is an image that the browser draws on demand. It needs no file and no network request, scales to any size without blurring and can be changed with a single line of code. Because it is an image, it goes wherever an image can go: most often in the background property, but also in border-image, mask and list-style-image.
All three gradient functions share the same idea. You describe a direction or a shape, then a list of colour stops. For a linear gradient the direction is an angle. For a radial gradient it is a shape and a centre, and the colours spread from the centre to the edge. For a conic gradient the colours rotate around the centre, with positions measured in degrees. The browser fills the space between neighbouring stops with a smooth transition.
The positions give you more control than it first seems. Stops close together make a sharp transition and stops far apart a gentle one. Two stops at the same position produce a hard line, which is how flags, stripes and progress bars are made from gradients. Combined with the repeating variants, a short list of stops becomes a pattern that tiles across the whole element.
A few practical points help in real designs. Blending two saturated colours on opposite sides of the colour wheel passes through a muddy grey in the middle, so add a middle stop in a clean colour. Keep enough contrast between any text and every part of the gradient behind it, not just the average. And remember that several gradients can be layered in one background declaration, separated by commas, for lighting effects that a single gradient cannot produce.