CSS Gradient Generator

What Is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors, generated by the browser rather than loaded as an image. Because it renders on the fly, a gradient background scales to any element size with no extra HTTP request, stays crisp on high-density screens, and can be swapped instantly with a class change. The background (or background-image) property accepts a linear-gradient() or radial-gradient() function, each taking a direction or shape argument followed by a comma-separated list of color stops.

Pick exact, well-matched color stops instead of guessing at hex values. Convert and compare colors in the Color Converter.

Linear vs. Radial Gradients

A linear gradient travels along a straight line at a chosen angle — 0deg points up, 90deg points right, and angles increase clockwise. It is the workhorse choice for buttons, headers, and full-page backgrounds where color should shift in one direction.

A radial gradient instead radiates outward from a center point, either as a circle (equal radius in all directions) or an ellipse (stretched to match the element's aspect ratio). Radial gradients suit spotlight or vignette effects, badges, and glow accents where the eye should be drawn to a single point rather than swept across the element.

Common Gradient Pitfalls

• Color banding. Gradients between two very different lightness values (near-black to near-white, for example) can show visible stripes on 8-bit displays, especially over a large area. Adding a third, intermediate color stop usually smooths the transition more effectively than fighting it with noise or dithering tricks.
• Email and legacy support. Every modern browser renders CSS gradients natively, but most email clients — Outlook chief among them — strip background-image entirely. If a gradient is going into an email template, set a solid background-color fallback close to the gradient's midtone so the layout still reads correctly.
• Stop position math. If you do not specify a position, the browser spaces stops evenly, which is rarely what you want once you are past two colors. Set explicit percentages for anything beyond a simple two-color fade, and keep them in ascending order to avoid the gradient rendering backwards over itself.

Picking the Right Tool for the Job

Reach for a linear gradient by default — it is cheap to reason about and covers the vast majority of UI needs, from subtle card backgrounds to bold hero sections. Switch to radial when you specifically want a focal point: a highlight behind an icon, a soft vignette around a photo, or a status glow. Multi-stop gradients work well for brand backgrounds but get harder to keep accessible — always check that any text placed over a gradient keeps enough contrast against the darkest and lightest points it crosses, not just the average.

Radial Gradients in Detail

A radial gradient takes three optional arguments before its color stops: a shape, a size, and a position, written as radial-gradient(shape size at position, stops). The shape is either circle or ellipse, and ellipse is the default — which is why a radial gradient on a wide element looks stretched unless you ask for a circle explicitly.

The size argument decides where the final color stop lands. farthest-corner is the default and stretches the gradient until it reaches the corner furthest from the center; closest-side stops at the nearest edge, which produces a tighter, more contained glow. The two remaining keywords, closest-corner and farthest-side, are less common but follow the same logic. You can also give an explicit radius, such as radial-gradient(circle 120px at center, #4a90e2, transparent), when the effect needs to be an exact size regardless of the element.

Position works like background-position: at center is the default, and at 30% 20% or at top left move the origin of the gradient. Offsetting the center is what separates a flat-looking radial fill from a convincing light source — a highlight placed slightly above and left of center reads as illumination, while a perfectly centered one tends to read as a target.

Color Stops, Hard Stops, and Transparency

Giving two adjacent stops the same position creates a hard stop — an abrupt edge instead of a blend. linear-gradient(90deg, #4a90e2 50%, #f39c12 50%) produces two solid halves, and the same trick scaled down builds stripes, progress bars, and split backgrounds without extra elements. A single stop can also carry two positions as a shorthand: #4a90e2 0% 50% is equivalent to writing that color twice.

Fading to transparent needs one piece of care. In most browsers the keyword transparent resolves to rgba(0, 0, 0, 0), so fading a color to transparent interpolates through black and leaves a grey cast in the middle of the fade. Fading to the same color at zero alpha instead — from #4a90e2 to rgba(74, 144, 226, 0) — keeps the hue constant the whole way and avoids the dirty midpoint.

Gradient Text with background-clip

CSS has no gradient color property, so gradient text is made by painting a gradient as the element background and then clipping that background to the glyph shapes. The pattern is three declarations: set background to the gradient, set background-clip: text (with the -webkit-background-clip: text prefix, still needed for broad support), and set color: transparent so the background shows through the letterforms.

Two details matter in practice. The gradient is sized to the element box, not to the text, so a heading in a full-width container spreads the gradient across the whole line and a short word may only sample a narrow slice of it — adding display: inline-block or width: fit-content ties the gradient to the text itself. And because the text is genuinely transparent, a browser that ignores background-clip renders invisible text, so it is worth setting a solid color first and overriding it inside an @supports (background-clip: text) block.

Full-Page and Card Gradient Backgrounds

A gradient applied to body does not always fill the viewport. If the page content is shorter than the screen, the body box is only as tall as its content, and the gradient ends where the content does. Setting min-height: 100vh on the element carrying the gradient, or applying background-attachment: fixed so the gradient is sized to the viewport instead of the box, both solve it — the fixed version also keeps the gradient still while the page scrolls.

Because gradients are background images, you can layer several in one declaration by separating them with commas — the first sits on top. Combining a soft radial highlight over a linear base is a common way to add depth to a hero section without an image file. Each layer can also carry its own background-size and background-position, which is how repeating texture effects such as stripes are built from a single gradient.

Beyond Linear and Radial: conic-gradient()

A third function, conic-gradient(), sweeps color around a center point like the hands of a clock rather than outward from it. It is what makes pie charts, colour wheels, and circular progress indicators possible in pure CSS, and it takes the same from angle and at position arguments as its siblings. This generator focuses on linear and radial because they cover almost all interface work, but conic-gradient() is supported in every current browser and is worth knowing when a value needs to be expressed as a proportion of a circle.

Frequently Asked Questions

What is the difference between linear-gradient() and radial-gradient() in CSS?

linear-gradient() paints color along a straight line at a given angle, while radial-gradient() paints color radiating outward from a center point in a circle or ellipse. Both accept the same comma-separated list of color stops; only the shape of the transition differs.

Why does my gradient show visible banding?

Banding happens when a gradient spans a wide lightness range over a large area and the display cannot represent enough intermediate shades smoothly. Adding one or two extra color stops between the two endpoints usually fixes it, since it gives the browser more actual color values to interpolate between rather than stretching a single transition too far.

Do all browsers support CSS gradients?

Yes — linear-gradient() and radial-gradient() have been supported without vendor prefixes in every major browser for years. The one common gap is email clients: many, including Outlook, ignore background-image entirely, so email templates need a solid background-color fallback.

Can a CSS gradient use more than two colors?

Yes, both gradient functions accept any number of color stops — just keep adding comma-separated color/position pairs. Ordering stops by ascending position keeps the transition predictable; out-of-order positions cause the gradient to render back over itself.

How do I create a radial gradient in CSS?

Use radial-gradient() in place of linear-gradient(), optionally naming a shape, size, and position first: background: radial-gradient(circle closest-side at 30% 30%, #4a90e2, #1f2a37). Without those arguments you get an ellipse sized to the farthest corner and centered in the element, which is why an unqualified radial gradient often looks stretched on wide elements — adding the circle keyword is usually the fix.

How do I make gradient text in CSS?

Apply the gradient as the element background, clip it to the text, and make the text transparent: background: linear-gradient(90deg, #4a90e2, #f39c12); -webkit-background-clip: text; background-clip: text; color: transparent. Add display: inline-block or width: fit-content so the gradient is sized to the words rather than the full container, and set a solid fallback color first in case background-clip is unsupported — otherwise the text renders invisible.

Why does my gradient background not cover the whole page?

Because body is only as tall as its content. If the page is shorter than the viewport, the gradient ends where the content ends and the rest of the screen falls back to the canvas color. Set min-height: 100vh on the element carrying the gradient, or use background-attachment: fixed so the gradient is sized against the viewport rather than the element box.

How do I create a hard edge instead of a smooth blend?

Give two neighbouring color stops the same position. linear-gradient(90deg, #4a90e2 50%, #f39c12 50%) renders as two solid halves with no transition between them, and repeating that pattern at smaller intervals produces stripes. This is the standard way to build split backgrounds and progress bars without adding extra elements to the markup.

References

• MDN: CSS gradient()