CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
CSS
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
Build linear, radial and conic CSS gradients visually — drag colour stops, set the angle, add as many colours as you need — and copy the generated CSS straight into your stylesheet.
Seeing the gradient render as you adjust it is considerably faster than editing numbers in a stylesheet and reloading, especially for multi-stop gradients where small changes to a stop position have a large visual effect.
The three gradient types
| Type | Syntax | Colour travels |
|---|---|---|
| Linear | linear-gradient(90deg, a, b) | Along a straight line at the given angle |
| Radial | radial-gradient(circle, a, b) | Outward from a centre point |
| Conic | conic-gradient(from 0deg, a, b) | Around a centre point, like a colour wheel |
In linear-gradient, 0deg points up and angles increase clockwise, so 90deg runs left to right.
Why some gradients look muddy in the middle
Browsers interpolate between colour stops in sRGB by default, and a straight line through sRGB between two saturated hues passes through a desaturated grey zone. Blue to yellow is the classic offender — the midpoint goes murky rather than passing through green.
Two fixes: add an intermediate stop in the hue you actually want the gradient to pass through, or use a perceptual colour space. Modern CSS supports `linear-gradient(in oklch, blue, yellow)`, which interpolates in a space where the midpoint stays vivid.
Practical tips
- Two stops close in hue and lightness read as a subtle, professional surface. Wide hue jumps read as decorative.
- For a hard-edged stripe rather than a blend, place two stops at the same position: `linear-gradient(90deg, red 50%, blue 50%)`.
- Gradients can be layered — comma-separate multiple backgrounds, using transparency in the upper layers.
- A gradient applied to text needs `background-clip: text` plus a transparent text colour.
- Check the contrast of any text sitting on a gradient at both ends, not just the middle.
- Very large gradients can be expensive to repaint during animation; animate `opacity` or `transform` instead of the gradient itself.
Frequently asked questions
- Which angle value do I need for a top-to-bottom gradient?
- 180deg. In CSS, 0deg points upward and angles increase clockwise, so 90deg goes left to right and 180deg goes top to bottom.
- Why does my blue-to-yellow gradient look grey in the middle?
- Default interpolation happens in sRGB, and the straight-line path between those hues passes through a desaturated zone. Add a green stop in the middle, or interpolate in OKLCH with `linear-gradient(in oklch, …)`.
- Can I animate a CSS gradient?
- Gradients themselves aren't smoothly animatable in most browsers. The usual approach is to make the gradient larger than its container and animate `background-position`, or cross-fade two layers with opacity.
- How do I create a hard stripe instead of a smooth blend?
- Give two adjacent colour stops the same position — `linear-gradient(90deg, red 50%, blue 50%)` produces a sharp edge with no blending.
- Do gradients work as text colour?
- Yes, via `background-image` on the text element plus `background-clip: text` and `color: transparent`. Check legibility carefully, as the contrast varies across the text.