🌈 CSS Gradient Generator: Linear and Radial Gradient CSS

What is the CSS Gradient Generator?

A CSS gradient is an image generated by the browser that blends smoothly between two or more colors. Because it is treated as a background image and not a solid color, you apply it with the background or background-image property rather than background-color. The three everyday types are linear-gradient, which blends along a straight line, radial-gradient, which blends outward from a center point, and conic-gradient, which sweeps colors around a center like a color wheel. All three are widely supported, need no image files, and add no extra HTTP requests, which keeps them fast and razor-sharp at any screen resolution.

A linear gradient is defined by a direction and a list of color stops. The direction is usually an angle in degrees, where 0deg points straight up, 90deg points to the right, 180deg points down, and 270deg points left. You can also use keywords like "to right" or "to bottom left" instead of an angle. Each color stop is a color optionally followed by a position written as a percentage or length. So linear-gradient(90deg, #337bff 0%, #ff4d6d 100%) blends from blue on the left to pink on the right. If you leave positions out, the browser distributes the stops evenly across the box.

A radial gradient blends from a center point outward, and its first arguments describe the shape and size: circle or ellipse, plus an optional size keyword such as closest-side or farthest-corner. The color stops work exactly as they do in a linear gradient, with positions running from the center (0%) to the edge (100%). You can also move the center with "at" syntax, for example radial-gradient(circle at top left, ...), which is handy for off-center glows and spotlight effects.

Color stops are where gradients get powerful. Placing two stops at the same position creates a hard edge, which is how you build stripes and flags without images. Adding a midpoint hint (a bare percentage between two color stops) shifts where the halfway blend lands, letting you bias a fade toward one color. Modern CSS also supports the interpolation color space, for example linear-gradient(in oklch, ...), which produces smoother, less muddy transitions than the default sRGB blend, especially between distant hues.

Because a gradient is painted as a background, it fills whatever box it is applied to and repeats or clips according to background-size and background-repeat. That means a gradient needs an element with actual dimensions to show anything: an empty div with no height paints nothing. You can also layer multiple gradients in one declaration by separating them with commas, using rgba() or transparent stops so lower layers show through. This is the standard trick behind mesh backgrounds, subtle noise overlays, and duotone image tints.

Gradients are performant because the GPU can composite them cheaply, but very large repainting areas or animated gradients can still cost frames. For animation, prefer transforming or transitioning a fixed gradient (for example by moving its background-position) over recalculating stops every frame, and test on lower-powered devices. When accessibility matters, keep enough contrast between text and the lightest part of the gradient behind it, because a fade can quietly drop text below the WCAG contrast threshold at one end.

When to use it

• Creating a colorful hero or call-to-action background for a landing page without loading an image file.
• Building soft button, card, and badge backgrounds that stay crisp on high-density (Retina) displays.
• Prototyping color blends quickly and pasting the exact CSS into a stylesheet or design system token.
• Making duotone or tinted image overlays by layering a semi-transparent gradient over a photo.
• Producing striped, banded, or flag-style backgrounds using hard color stops instead of image assets.
• Generating dark-mode-friendly section dividers and subtle depth without extra DOM elements.

How to use the CSS Gradient Generator

1. Choose Linear, Radial, or Conic at the top.
2. Pick a color for each stop and set its position as a percentage.
3. For a linear gradient, drag the angle slider; for radial, choose circle or ellipse.
4. Use Add color to insert extra stops, or Remove to delete one (a minimum of two is kept).
5. Reorder stops so their positions increase from left to right to avoid unintended hard edges.
6. Check the live preview, then click Copy to grab the background CSS and paste it into your stylesheet.

Formula & method

Worked examples

Common linear-gradient angles and the direction they point

The three CSS gradient types and when to reach for each

Color-stop syntax patterns and what they produce

Common mistakes to avoid

• Using background-color instead of background. A gradient is a generated image, so it must go on background or background-image. background-color only accepts a single solid color and will silently ignore the gradient.
• Getting the angle direction backwards. In CSS, 0deg points up and angles increase clockwise, so 90deg points right. This is different from a maths protractor, where 90deg points up. Check the preview if a gradient looks rotated.
• Forgetting that gradients need a sized box. A gradient fills its element, so an element with no height (an empty div, for example) shows nothing. Give the element a height, padding, or content so the background has an area to paint.
• Out-of-order color stop positions. If a later stop has a smaller position than an earlier one, the browser clamps it, which can create a hard edge you did not intend. Keep positions increasing from the first stop to the last.
• Low text contrast at one end of the fade. Text can pass a contrast check over the dark end of a gradient but fail over the light end. Verify contrast against the lightest color behind your text so it stays readable across the whole box.
• Adding vendor prefixes that are no longer needed. Old tutorials show -webkit- and -moz- prefixed gradients. Every current browser supports the unprefixed syntax, so extra prefixes just bloat your CSS. Only add them if you must support very old browsers.

Glossary

Gradient

A smoothly blended transition between two or more colors, generated by the browser as a background image.

Color stop

A single color in the gradient, with an optional position (in percent or length) that sets where that color sits along the blend.

Linear gradient

A gradient that blends colors along a straight line, defined by an angle or a direction keyword like "to right".

Radial gradient

A gradient that blends colors outward from a center point, shaped as a circle or an ellipse.

Conic gradient

A gradient that sweeps colors around a center point like a color wheel, defined with conic-gradient() and a starting angle.

Angle (deg)

The direction of a linear gradient in degrees, where 0deg points up and the angle increases clockwise.

Midpoint hint

A bare percentage placed between two color stops that shifts where the halfway blend point lands, biasing the fade toward one color.

Interpolation color space

The color model the browser blends through, set with syntax like "in oklch", which can make transitions smoother and less muddy than the default sRGB.

Frequently asked questions