CSS Gradient Generator
Add two or more color stops to instantly generate linear-gradient or radial-gradient CSS code with a live preview. Adjust the angle and stop positions freely, then copy the generated code with one click.
What a CSS gradient is
A CSS gradient is a way of drawing a band or a radial spread of two or more colours blending into one another, using nothing but a stylesheet — no image required. linear-gradient() shifts the colours along a straight line at the angle you name; radial-gradient() spreads them outward from a centre in circles. Being written as text it is light, it does not turn coarse when enlarged, and changing a colour is a matter of editing a value.
This tool lets you adjust the type, the angle and the colour stops on screen, see the result as you go, and copy the finished CSS straight out. You may place up to six colour stops, each with its own colour and position in per cent; fewer than two makes no gradient at all and raises an error. Note that CSS measures the angle its own way: 0deg runs from the bottom upward and 90deg from the left rightward, so zero points elsewhere than in ordinary mathematics. A radial gradient has no notion of angle, so the angle setting has no effect on it.
How to build a CSS gradient
- Choose the type Take linear if you want the colours to shift along a straight line, radial if you want them to spread outward from a centre.
- Set the angle This applies to the linear kind only. 0deg runs bottom to top and 90deg left to right, increasing clockwise. Move the slider and watch the direction settle.
- Place the colour stops “Add a colour” takes you up to six. Give each stop a colour and a position in per cent and you control closely where one colour gives way to the next.
- Check the preview The preview is redrawn with every change, so you can judge on the spot whether a boundary is too abrupt or the direction is what you wanted.
-
Copy the CSS
“Copy CSS” puts it on the clipboard, ready to paste into the
backgroundof your stylesheet.
Tips for getting more out of it
- You can add up to 6 color stops and freely adjust each color and its position (%) to build complex, multi-color gradients.
- For a linear gradient, 0deg points from bottom to top and 90deg points from left to right — drag the slider to adjust it intuitively.
- Radial gradients have no angle setting; colors radiate outward from the center in a circular pattern instead.
- Click "Copy CSS" to copy the generated code straight to your clipboard and paste it directly into your stylesheet.
Where CSS gradients help
Giving a button or badge some depth
A linear gradient darkening slightly from top to bottom makes a control look more pressable than a flat colour. Keeping the difference between the colours small is what keeps it looking natural.
Building a hero background
Lay a gradient of two or more colours across the broad band at the top of a page and you have a striking background without loading a single image — and without slowing the page down.
A spotlight effect
A radial gradient bright at the centre and dark at the edges reads as light falling on the surface.
Putting text over a photograph
Overlay a linear gradient running from semi-transparent black to fully transparent and the text stays legible even across the bright parts of the picture.
When it is the colours you are settling
While choosing what to put at each stop, use the colour code converter; to think about combinations, the colour palette.
Terms used with CSS gradients
- linear-gradient
- The CSS function that draws a gradient whose colours shift along a straight line at a given angle. It suits banded backgrounds and the fill of a button.
- radial-gradient
- The CSS function that draws a gradient spreading outward from a centre in circles or ellipses. It has no notion of angle.
- Colour stop
- An instruction placing a particular colour at a particular point along the gradient. The position is given as a percentage, with the start at 0% and the end at 100%.
- Angle (deg)
- The direction in which a linear gradient’s colours travel. In CSS, 0deg runs from the bottom upward and 90deg from the left rightward, increasing clockwise — zero points elsewhere than in ordinary mathematics.
- Vendor prefix
- A prefix such as
-webkit-, attached back when each browser offered a feature in its own way before standardisation. Gradients are standardised now, so no prefix is needed. - The background property
- The CSS property that sets the background of an element. A gradient counts as a kind of background image, which is why it is written here.
Frequently Asked Questions
Side Note — Why CSS Gradients Replaced Gradient Images
Before CSS3, gradient backgrounds on the web were typically created as PNG or JPEG images made in an image editor. That approach came with real downsides: slower page loads from extra image requests, blurry results when the image was stretched for responsive layouts, and having to re-export the whole image just to tweak a single color.
When browsers implemented the linear-gradient and radial-gradient syntax in the early 2010s, those problems largely disappeared. Because gradients are described entirely in text, they're lightweight, stay crisp at any size, and can be recolored just by editing a few values in a stylesheet.
Early implementations required different vendor prefixes (-webkit-, -moz-, -o-, and so on) and slightly different syntax across browsers, so developers had to write out multiple prefixed versions of the same rule. Now that the syntax has been standardized by the W3C, the unprefixed version works consistently across every major browser.