About CSS Gradients
A CSS gradient is a smooth transition between two or more colours, written as a CSS function like linear-gradient(), radial-gradient() or conic-gradient(). Because gradients are technically background images, they work anywhere background-image is allowed and scale perfectly on any screen without pixelation. They replaced the old bitmap-heavy technique of slicing gradient images and are one of the most-used features in modern web design.
This generator lets you build all three gradient types visually. You can drag colour stops along the gradient bar, tweak the angle with a rotating dial, adjust stop positions with precision, and copy the finished CSS with a single click.
The three gradient types
| Type | Blends along… | Typical use |
|---|---|---|
| Linear | A straight line at any angle | Buttons, headers, hero backgrounds, chart fills |
| Radial | Circles/ellipses from a centre point | Spotlights, soft highlights, card backgrounds |
| Conic | A sweep around a central axis | Pie charts, colour wheels, retro dashboards |
Colour stops: how gradients get their shape
Every gradient is defined by a set of colour stops. Each stop has a colour and a position from 0% to 100%. The browser interpolates smoothly between adjacent stops, so:
- Two stops give a simple fade from colour A to colour B.
- Three or more stops create multi-colour transitions — rainbows, sunset bands, duotones.
- Two stops at the same position produce a hard colour break, giving you a sharp edge rather than a fade.
- Non-linear spacing (stops bunched near one end) concentrates more transition in the compressed region — useful for atmospheric effects.
The angle convention
In linear-gradient(), the angle points in the direction the gradient travels:
| Angle | Direction |
|---|---|
| 0deg | Bottom → Top (colour 1 at the bottom) |
| 90deg | Left → Right |
| 135deg | Top-left → Bottom-right (diagonal, most popular) |
| 180deg | Top → Bottom (default, if you omit the angle) |
| 270deg | Right → Left |
Practical tips
- Use analogous hues. Colours next to each other on the wheel (blue → purple) produce smoother, more professional gradients than complementary pairs.
- Keep luminosity close. Two colours of very different lightness fade through mud in the middle. Pick stops with similar lightness for a cleaner blend.
- Three stops beat two. Adding a middle stop lets you control the transition curve — a slight variation in the middle stop can soften or sharpen the entire gradient.
- Watch text contrast. Text on a gradient must pass WCAG against the lightest and darkest points of the background. Test both ends.
- Reuse your gradient. Save the CSS as a custom property (
--gradient-hero) so it stays consistent across your project.
Common use cases
Hero backgrounds
Large atmospheric gradients behind landing copy.
Buttons & CTAs
Subtle gradients add depth without a lot of markup.
Image overlays
Darken photo edges for readable text.
Chart fills
Gradient area fills under line charts.
Cards & badges
Diagonal gradients on pills and status chips.
App splash screens
Full-viewport colour fades on mobile entry screens.
Privacy and accuracy
This CSS gradient generator runs entirely in your browser. All generation happens locally in JavaScript with no server calls. The colours and settings you use are never transmitted, stored or logged.