CSS Gradient Generator

What the CSS gradient generator does

This tool builds `linear-gradient()` and `radial-gradient()` backgrounds visually and gives you the finished CSS to copy into a stylesheet. You add color stops, drag them into position, set an angle or shape, and watch the preview update in real time — no manual trial and error with syntax you have to re-check in the browser.

Gradients are just CSS background images made of color transitions instead of pixels, so anywhere `background-image` or `background` is valid, a gradient works too: page backgrounds, buttons, overlays on top of photos, borders (via border-image), and even text when combined with `background-clip: text`.

Everything runs client-side in your browser. Building a gradient here doesn't upload anything or require an account — you're just generating a string of CSS that you paste into your own project.

Linear vs radial vs conic gradients

`linear-gradient()` transitions color along a straight line at a given angle. `linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)` moves diagonally from indigo through pink to amber [1](https://cssgradients.app/). The angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg points down, 270deg points left. You can also use keywords like `to right` or `to bottom left` instead of degrees.

`radial-gradient()` transitions outward from a center point instead of along a line, forming circles or ellipses. `radial-gradient(circle at center, #fff 0%, #1e3a8a 100%)` creates a glow that fades from white in the middle to dark blue at the edges. You can position the center anywhere with `at top left`, `at 30% 70%`, and so on, and choose `circle` or `ellipse` as the shape.

`conic-gradient()` sweeps colors around a center point like a color wheel or pie chart rather than radiating outward, which is useful for things like progress rings or hue pickers. It isn't the primary focus of this generator, but the same color-stop logic applies: each stop is a color plus a position along the sweep [2](https://moderncsstools.com/gradient-generator/).

Color stops and positions, explained with numbers

A color stop is a color plus an optional position telling the browser where that color should be 'fully reached' along the gradient. `linear-gradient(90deg, red 0%, yellow 50%, blue 100%)` starts pure red at the left edge, hits pure yellow exactly in the middle, and ends pure blue at the right edge, blending smoothly between each pair.

If you omit positions, CSS spaces stops evenly: `linear-gradient(90deg, red, yellow, blue)` produces the same visual result as the explicit version above, because three stops with no positions default to 0%, 50%, and 100%. Positions become essential once you want an uneven distribution, like keeping a color solid for a stretch before it starts blending: `linear-gradient(90deg, #000 0%, #000 40%, #fff 100%)` stays solid black until 40% of the way across, then fades to white over the remaining 60%.

You can also add hard color stops (no blending at all) by placing two colors at the same position: `linear-gradient(90deg, red 50%, blue 50%)` produces a sharp half-red, half-blue split with no gradient blur at the seam — effectively a diagonal or straight stripe rather than a fade.

Alpha values on stops let a gradient fade to transparent instead of to another solid color, which is the standard technique for photo overlays: `linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)` darkens the bottom of an image for legible text while leaving the top untouched.

Worked examples you can copy

Sunset hero background: `background: linear-gradient(180deg, #ff7e5f 0%, #feb47b 50%, #ffe29a 100%);` — orange at the top fading through peach to pale yellow at the bottom, a common full-viewport hero treatment.

Subtle button hover: `background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);` — a small lightness shift from top to bottom gives a button a slight sense of depth without looking like a heavy 3D effect.

Radial spotlight: `background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%), #111827;` — a soft light source in the upper-left corner layered over a solid dark background, a technique widely used on dark-mode marketing sections.

Multi-stop brand gradient: `background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #f59e0b 100%);` — four stops moving from indigo to violet to pink to amber, evenly spaced but with 135deg giving it a diagonal top-left-to-bottom-right direction.

Mistakes people make with gradients

Forgetting the angle or direction keyword is the most common one — `linear-gradient(red, blue)` defaults to top-to-bottom, which surprises people expecting left-to-right. Always specify the angle explicitly if the direction matters to your layout.

Overusing too many stops muddies a gradient instead of making it richer. Three to four well-chosen colors almost always look cleaner than seven, especially once you factor in how browsers blend in sRGB by default, which can produce a dull gray-brown zone in the middle of gradients between complementary colors like red and green.

Another mistake is applying a gradient where flat color would serve better for accessibility — text placed over a gradient background needs its contrast checked against the lightest and darkest points of that gradient, not just the average color, since WCAG contrast requirements (4.5:1 for normal text, 3:1 for large text) apply wherever the text sits.

Finally, people sometimes forget vendor considerations are outdated: `-webkit-linear-gradient()` and other prefixed versions haven't been necessary in any current browser for years. Plain `linear-gradient()` and `radial-gradient()` work everywhere modern, so there's no need to output prefixed CSS anymore.

Layering multiple gradients and gradients with images

`background` accepts a comma-separated list of background images, and gradients count as images, so you can stack several: `background: radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 50%), linear-gradient(135deg, #1e3a8a, #312e81);` layers a soft highlight over a base diagonal gradient. The first item in the list renders on top.

You can also mix a gradient with a photo: `background: linear-gradient(to top, rgba(0,0,0,0.7), transparent), url('/hero.jpg'); background-size: cover;` puts a dark fade over the bottom of an image so overlaid white text stays readable, which is one of the most common real-world uses of gradients on marketing pages.

Because gradients are just CSS, they scale losslessly and add effectively no file weight compared to an exported PNG gradient image, and they respond instantly to changes — swap two hex values and the whole background updates, no re-exporting from a design tool required.

Browser support and practical limits

`linear-gradient()` and `radial-gradient()` are supported in every current browser without prefixes and have been for a long time; `conic-gradient()` has been supported in all major browsers since 2021, so it's safe for production too. Color-space-aware syntax like `linear-gradient(in oklch, red, blue)` is newer and worth feature-detecting or providing a fallback for if you rely on it for perceptually smoother transitions.

There's no hard limit on the number of stops you can add, but performance and readability both suffer well before you'd hit any technical ceiling — CSS gradients are cheap to render even with a dozen stops, the real cost is a stylesheet that's hard for a human to maintain.

Gradients defined in CSS aren't automatically responsive in shape — a `radial-gradient` positioned `at 20% 20%` will shift proportionally as the element resizes, but an angle-based `linear-gradient` keeps the same angle regardless of the element's aspect ratio, so a gradient that looks diagonal on a square card can look almost horizontal on a wide banner. Preview at the actual dimensions you'll ship before finalizing the angle.