CSS Gradient Generator
Build linear, radial and conic CSS gradients with live preview. Add unlimited colour stops with per-stop opacity, drag positions, and apply the result as a background, gradient text, or gradient border. Ten presets included, and the generated CSS carries the vendor prefixes where they still matter. Everything runs in your browser. Free, no signup.
Ten presets — click any swatch to load it.
How to Use This Tool
- Choose a gradient type — linear for a straight sweep, radial for a circular or elliptical blend, conic for a colour wheel effect.
- Add and position colour stops — set each stop colour, slide its position, and lower its opacity below 1 to fade into transparency.
- Set the angle or centre — linear and conic gradients take an angle; radial and conic also take a centre point, shape and size.
- Copy the CSS — switch Apply to between background, text and border, then copy the full rule or just the gradient value.
About CSS Gradients
A CSS gradient is not an image, even though it behaves like one. The browser generates it at paint time from a short declaration, which means it scales to any size without blurring, costs no HTTP request, adds nothing to your page weight, and can be changed by editing a line of CSS rather than re-exporting an asset. That last point matters more than it sounds: a gradient defined in a custom property can be themed, animated, or swapped for dark mode without a designer ever opening an image editor. For flat colour blends, a gradient is almost always the better choice than a PNG or JPEG.
The three types answer different questions. A linear gradient blends along a straight line whose direction you set in degrees, where 0deg points up and 90deg points right, which is the one you want for hero backgrounds, buttons and section dividers. A radial gradient blends outward from a centre point, either as a circle or an ellipse, and is the natural fit for spotlights, glows and vignettes. A conic gradient sweeps around a centre point like a clock hand, which makes it the only one of the three that can produce a colour wheel, a pie chart, or a convincing conic sheen on a card.
Colour stops are where gradients get interesting. Each stop pairs a colour with a position from 0 to 100 percent, and the browser interpolates smoothly between them. Placing two stops at the same position produces a hard edge rather than a blend, which is how you build stripes and split backgrounds with no image at all. Setting a stop to a transparent rgba value lets a gradient fade into whatever sits behind it, which is the standard technique for the readability scrim over a hero photograph. Adding a third stop in the middle of a two-colour blend is also the usual fix for a gradient that looks muddy, because the direct path between two distant hues often passes through grey.
Banding is the most common complaint about gradients, and it is a display limitation rather than a CSS bug. An 8-bit-per-channel screen has only 256 steps per channel, so a gradient stretched across a wide area between two similar colours runs out of distinct values and renders as visible stripes. The practical mitigations are to increase the contrast between your stops, add intermediate stops so the interpolation has more anchor points, keep large gradients away from the flattest hues, or overlay a very subtle noise texture, which is what most design systems do for full-page backgrounds.
Browser support is a solved problem for linear and radial gradients, which have worked unprefixed for well over a decade. Conic gradients are newer but supported across all current browsers, and notably were never shipped behind a vendor prefix, which is why this tool emits prefixed fallbacks for linear and radial output but not for conic. Gradient text still needs the -webkit-background-clip prefix alongside the standard property, and gradient borders use border-image with a slice value of 1. Each of those quirks is handled in the generated CSS so you can paste it and move on.
Pair this with our Color Palette Generator to pick harmonious stops, the CSS Minifier to compress the finished stylesheet, and the Box Shadow Generator for matching depth.
Frequently Asked Questions
What is the difference between linear, radial and conic gradients?
They differ in the geometry along which colours blend. A linear gradient blends along a straight line whose angle you set, where 0deg runs bottom to top and 90deg runs left to right, making it the default choice for backgrounds and buttons. A radial gradient blends outward from a centre point as either a circle or an ellipse, which suits glows, spotlights and vignettes. A conic gradient sweeps around a centre point like the hand of a clock, so the colours change with angle rather than distance. That last one is what lets you build a colour wheel, a pie chart or a metallic sheen entirely in CSS.
How do colour stop positions work?
Each stop pairs a colour with a position expressed as a percentage of the gradient line, so a stop at 0 percent sits at the start, one at 100 percent at the end, and the browser interpolates smoothly between them. If you omit positions the browser spaces the stops evenly. Two useful tricks come from controlling them directly: placing two stops at the same position creates a hard edge instead of a blend, which is how you make stripes without an image, and clustering stops near one end skews the blend so one colour dominates most of the area. Adding a stop in the middle of a two-colour gradient also fixes blends that look muddy.
Can I use a gradient on text?
Yes, using background-clip. You set the gradient as a background image on the element, clip that background to the shape of the glyphs with background-clip set to text, and make the text colour transparent so the background shows through. The one wrinkle is that the -webkit-background-clip prefix is still required for reliable rendering, so the correct rule includes both the prefixed and unprefixed properties. This tool emits both when you set Apply to as Text. Keep an eye on contrast, since gradient text can dip below accessible contrast at one end of the blend even when it passes at the other.
How do I make a gradient border?
Borders do not accept a background image directly, so the usual approach is border-image. You set a transparent border of the width you want, then apply the gradient through border-image with a slice value of 1, which tells the browser to stretch the generated image across the whole border box. The catch is that border-image does not respect border-radius, so this technique produces square corners. If you need rounded gradient borders, the common alternatives are a padded wrapper element with the gradient as its background, or a background-image pair using background-origin and background-clip.
Are CSS gradients better than gradient images?
For flat colour blends, almost always yes. A gradient costs no HTTP request and no bytes beyond the CSS declaration itself, scales to any size without blurring or pixelation, renders crisply on high-density displays, and can be restyled by changing a variable rather than re-exporting an asset. That makes them theme-friendly and animatable. Images still win in two situations: complex multi-stop meshes and organic blobs that CSS cannot express, and photographic textures. As a rule, if you can describe the blend in a sentence, use CSS; if it needed a designer in Photoshop, use an image.
Why does my gradient look banded or striped?
Because most displays are 8 bits per channel, giving only 256 distinct values per colour. When a gradient stretches a small colour difference across a large area, consecutive pixels have to repeat the same value many times before stepping, and those steps become visible as bands. It is a display limitation rather than a CSS fault, and it is worst between similar dark colours over a full-page background. The fixes are to increase the contrast between stops, add intermediate stops so the interpolation has more anchors, reduce the physical size of the gradient, or overlay a very subtle noise texture, which is what most design systems do.
Do I still need the -webkit- and -moz- prefixes?
For linear and radial gradients, not for any browser in current use, since both have been supported unprefixed for well over a decade. The prefixed versions are included here purely as a harmless fallback for very old rendering engines, and you can safely delete them for a modern project. Conic gradients are the interesting case: they arrived late enough that they were never shipped behind a vendor prefix at all, so emitting -webkit-conic-gradient would produce a rule no browser has ever understood. That is why this tool omits prefixes for conic output and includes them for the other two. Gradient text is the one place a prefix is still genuinely required.
Can I animate a CSS gradient?
Not directly, because background-image is not an animatable property, so a CSS transition between two gradients will snap rather than blend. There are three standard workarounds. The most common is to define a gradient much larger than the element with background-size, then animate background-position so the visible slice moves, which gives the impression of a shifting gradient. The second is to stack two gradients and animate the opacity of the top one. The third, and the most flexible, is to use a registered custom property with @property, which lets the browser interpolate a colour or angle that the gradient reads from.