CSS Gradient Generator

Linear vs Radial Gradients

A linear gradient transitions colors along a straight line at a given angle, 0° points upward, 90° points right, and so on. A radial gradient transitions colors outward from a center point in a circular or elliptical shape, which works well for spotlight effects, glows, or subtle depth on cards and buttons.

Working with Color Stops

Each color stop defines a color and the percentage position where it sits along the gradient. Two stops give a simple two-color blend; adding a third stop in the middle lets you create more complex transitions, like a sunset effect that moves through several hues instead of just two. This generator supports up to six stops, more than enough for the vast majority of real gradients, since each additional stop adds a new transition point that has to be positioned deliberately or the result starts looking muddy rather than smooth. Dragging a stop's position slider close to a neighboring stop compresses the transition between them into a narrower band, useful for creating a sharper color change partway through an otherwise smooth gradient, similar to how a sunrise has a tight band of orange near the horizon before fading gradually into blue above it.

Understanding Gradient Angles

The angle value in a linear gradient controls the direction colors flow, and it's easy to misread if you're used to thinking in compass or math terms. In CSS, 0deg points straight up (not right, as many people assume from standard math conventions), 90deg points right, 180deg points down, and 270deg points left, with every value in between rotating clockwise from the top. The default angle in this tool, 135deg, points toward the bottom-right corner, a popular choice for hero sections and cards because it reads as a natural light-to-dark or top-to-bottom flow without looking perfectly horizontal or vertical, which can sometimes feel more mechanical.

Common Gradient Use Cases

Hero section backgrounds. A subtle two-color gradient behind a page's main heading adds depth without competing with the text, especially when the two colors are close in hue and lightness rather than high-contrast.

Buttons and call-to-action elements. A gradient button, often going from a brand color to a slightly darker or lighter shade of the same hue, adds a sense of dimensionality that a flat color fill doesn't provide, while still reading clearly as a single clickable element.

Overlays on images. A dark-to-transparent gradient layered over a photo, commonly from black at the bottom fading to transparent at the top, is the standard technique for keeping text readable when it sits directly on top of a background photograph.

Text gradients. Applying a gradient as a background and clipping it to text (using background-clip: text with a transparent text color) produces the colorful gradient-text effect common in modern marketing pages and app icons.

Common Mistakes When Building Gradients

Using too many stops with clashing colors. A gradient with four or five unrelated hues rarely reads as intentional, it tends to look like a leftover default rather than a deliberate design choice. Most effective gradients use two or three colors that share some relationship, adjacent hues, or different shades of the same color.

Ignoring text contrast on top of a gradient. Since a gradient's color shifts across its length, text that reads clearly at one end can fail contrast entirely at the other. Always check both ends of a gradient, not just the average, when placing text over it, our Contrast Checker can verify each end separately.

Banding on large, subtle gradients. When two very similar colors are stretched across a large area, the transition can appear as visible stripes rather than a smooth blend, an artifact of limited color precision in 8-bit displays. Adding a very slight amount of extra contrast between stops, or introducing a third intermediate stop, usually resolves visible banding.

Beyond Linear and Radial: Conic and Repeating Gradients

CSS supports two additional gradient types not covered by this generator's two tabs, useful to know about even if you build them by hand. A conic gradient sweeps colors around a center point like a color wheel or pie chart, rather than along a line or outward from a center, making it the standard technique for building CSS-only pie charts, color wheels, and loading spinners. A repeating gradient, created with repeating-linear-gradient or repeating-radial-gradient, tiles the same color sequence over and over across an element, commonly used for stripes, chevron patterns, or subtle textured backgrounds. Both accept the same color-stop syntax produced by this tool, so a stop sequence designed here can be adapted into either by changing the function name.

Direction Keywords vs Explicit Angles

CSS linear gradients accept two different ways of specifying direction: a numeric angle like 135deg, or a keyword phrase like to bottom right. The keyword syntax describes the direction as a destination, "to bottom right" means the gradient flows toward that corner, and it's calculated relative to the element's actual box, so a keyword-based gradient can look slightly different on a wide element compared to a tall one, since the exact corner angle depends on the box's proportions. A numeric angle, by contrast, is always exactly the same regardless of the element's shape, which makes it more predictable when a design calls for a consistent flow direction across differently sized elements. This tool outputs numeric angles for that reason, keywords are easier to read at a glance but less precise once a component library needs the same gradient to behave identically across buttons, cards, and banners of different sizes.

Positioning a Radial Gradient's Center

By default, a radial gradient's center sits at the middle of its element, but CSS allows repositioning that center point anywhere within the box using a position value, for example radial-gradient(circle at top left, ...) shifts the gradient's origin toward the corner instead of the middle. This is especially useful for spotlight or glow effects where the light source shouldn't be perfectly centered, like a card that appears lit from one corner, or a hero background where the brightest point sits behind a specific piece of content rather than in the geometric center of the section. Once a gradient's colors and stops are set here, adding an at position clause to the generated CSS by hand is a quick way to art-direct exactly where that glow appears.

Gradients vs Background Images: A Performance Note

A CSS gradient is computed by the browser at render time rather than downloaded as a file, which means it adds zero bytes to a page's network payload and scales perfectly to any screen size or resolution without ever looking blurry or pixelated. A background image achieving the same visual effect, by contrast, requires an HTTP request and a fixed-resolution file that can look soft when stretched beyond its native size. For any background effect that can be achieved with a smooth color transition, a CSS gradient is almost always the better technical choice over an exported image, reserving image assets for cases with genuine photographic or textured detail that a gradient can't reproduce.

Choosing Colors That Work Well Together in a Gradient

A gradient's two endpoints don't need to be radically different colors to look good, in fact, gradients built from hues that sit reasonably close together on the color wheel tend to look more polished than ones that jump between unrelated colors. Starting from a base brand color and shifting only its lightness or saturation for the second stop, for example going from a deep indigo to a slightly lighter, slightly more saturated version of the same hue, produces a subtle, professional-looking gradient that still reads as "on-brand" rather than decorative. For a bolder, more energetic effect, pairing two hues that sit around 60 to 90 degrees apart on the color wheel (a loosely analogous relationship) usually reads as vibrant without clashing the way two directly opposite, high-saturation colors can. Our Color Palette Generator is a useful companion here, generate an analogous or monochromatic palette first, then feed two of its colors into this tool as gradient stops.

A Step-by-Step Sunset Gradient Example

A classic three-stop sunset gradient is a good way to see how positioning interacts with color choice. Start with a warm yellow-orange at the 0% stop to represent the sun near the horizon, add a mid-tone coral or pink stop around the 50% position for the transition band of sky, and finish with a deep purple or navy at the 100% stop for the darker sky higher up. Setting the linear angle to roughly 180deg (top to bottom) makes this read naturally as a vertical sky, while nudging the middle stop's position slightly, say to 40% instead of an even 50%, shifts more of the visible gradient toward the darker end, which can feel more like dusk than midday. This same three-stop, uneven-spacing technique, warm anchor, transitional midpoint, cool anchor, generalizes well beyond sunsets to any gradient that needs to feel like a natural transition rather than a mechanically even blend.

Frequently Asked Questions

Can I use more than 2 colors?

Yes, click "Add Color Stop" to add more stops, and drag each one's position slider to control where it sits in the gradient.

Where do I use the generated CSS?

Paste it into any element's background or background-image property in your stylesheet, for example, .hero { background: linear-gradient(...); }.

What's the difference between a circle and an ellipse radial gradient?

A circle radial gradient is perfectly round regardless of the element's shape, while an ellipse (the CSS default) stretches to match the element's width and height, so it appears round on a square element and oval on a rectangular one.

Can I animate a CSS gradient?

Browsers can't smoothly interpolate between two different gradient values by default, so the common workaround is animating background-position on an oversized gradient, or layering two gradients and crossfading their opacity. Modern browsers also support animating gradient angles directly using the CSS @property rule.

Will my gradient work in all browsers?

Linear and radial gradients have full support in every modern browser, including mobile, without needing vendor prefixes. The only real caveat is very old browsers like Internet Explorer, which most sites no longer need to support.

Can I layer multiple gradients on one element?

Yes, the background property accepts a comma-separated list of gradients, stacked in the order listed with the first one on top, which is a common technique for combining a color tint with a texture or a second gradient for extra depth.