How to Create CSS Gradients Visually
Writing a gradient by hand is a slow loop: type some values, save, refresh, squint, adjust. The syntax is not hard, but the result is impossible to picture from the numbers. The Gradient Generator shows you the gradient as you build it.
Linear and radial, and when each fits
A linear gradient moves between colours in a straight line, at whatever angle you choose. It is what you want for page backgrounds, buttons and banners - anything where the colour should drift across the element.
A radial gradient spreads outward from a point. It suits glows, spotlights, and soft focus behind a piece of content. Used as a page background it tends to look like a mistake, because the centre draws the eye to wherever it happens to land.
The part that goes wrong
Two colours of similar lightness but different hue produce a muddy grey band where they meet. Blue to orange is the classic offender. The fix is to keep the two colours close on the wheel, or to let one of them be noticeably lighter so the transition reads as a change in brightness rather than a fight between hues.
Subtlety also travels further than it looks on your monitor. A gradient that seems gentle on a bright screen can band visibly on a cheaper one.
How to build one
Open the tool, choose two colours and a direction, and watch the preview update. When it looks right, copy the CSS straight into your project.
If you want the two colours to be related rather than arbitrary, generate them with the Palette Generator first - two shades from the same family almost always blend cleanly.
Gradients on text and borders
The same gradient can do more than fill a background. Clipped to the shape of letters it produces gradient text, which is a small CSS trick covered by the Gradient Text Generator. Applied to a border it gives the thin coloured edge that has become common on cards and buttons, though that needs a slightly awkward arrangement of two backgrounds because CSS has no direct gradient-border property.
A more useful variation is the overlay. A gradient running from transparent to a solid dark colour, laid over a photograph, is how almost every hero image with text on it stays readable - the text sits in the dark end and the picture shows through everywhere else.
Common questions
What angle should I use?
135 degrees - top-left to bottom-right - is the safe default and reads as natural light. Straight down is the next most common.
Can I use more than two colours?
Yes in CSS generally, though more stops means more chances to produce a muddy band. Two is usually plenty.
Why does my gradient look striped?
That is banding, and it shows most on subtle gradients between similar colours. Increasing the difference between the two colours usually clears it.
Can a gradient be animated?
Not the gradient itself in most browsers, but moving the background position gives the same impression and is widely used for shifting backgrounds.
Ready to see it as you build it?