CSS Gradient Generator

Why some color combinations produce a muddy band in the middle

The CSS this tool generates interpolates colors in sRGB space by default, since that's what plain linear-gradient()/radial-gradient() syntax without an explicit color space has always done. sRGB interpolation is a straight numeric blend of red, green, and blue channel values — which works fine for similar hues, but produces a visibly dull, grayish-brown band for gradients between roughly complementary colors, like red transitioning to green. The midpoint blend of full-intensity red and full-intensity green in sRGB is a muddy olive tone, not the vibrant yellow you'd intuitively expect. Newer CSS (linear-gradient(in oklch, ...)) can interpolate in perceptually uniform color spaces that avoid this, but that's a manual edit to the copied CSS — this tool's generated output uses the classic, universally supported sRGB interpolation every browser has always understood.

Linear vs radial gradients

• Linear gradient — colors transition along a straight line defined by an angle or direction keyword (to right, 45deg, etc.). Use for background fills, banners, and side-to-side color transitions.
• Radial gradient — colors radiate outward from a center point in a circular or elliptical shape. Use for spotlight effects, circular buttons, and radial glow effects.

Color stops explained

A color stop defines a specific color at a specific position along the gradient axis (0% = start, 100% = end). You can have as many stops as you need. Stops don't have to be evenly spaced — placing two stops close together creates a sharp edge rather than a smooth transition, which is useful for striped or flag-style designs.

A gradient between two close, low-contrast colors — pastel-to-pastel, or two close shades of the same hue — spread across a large element can show visible banding instead of a smooth blend, especially on screens with 8-bit-per-channel color (most consumer displays). Each color channel only has 256 possible values, so a slow transition over a few hundred pixels can run out of distinct intermediate values to step through, showing up as faint visible stripes rather than a continuous gradient. Adding a third intermediate stop, or simply increasing the contrast between your two end colors, both reduce how visible the banding is.

CSS gradient syntax reference

Browser support

CSS gradients are supported in all modern browsers without vendor prefixes. The -webkit- prefix was required until around 2013 — modern projects do not need it.

Gradients vs. an actual image

A generated gradient costs zero HTTP requests and zero image bytes — it's computed by the browser's rendering engine from the CSS values alone, recalculated instantly if the element resizes. A PNG or JPEG gradient baked into an image file is a fixed-resolution bitmap: it gets blurry or blocky if the element is larger than the source image, and it adds a network request and decode cost a CSS gradient never has. The only real case for an exported gradient image is when you need something CSS gradients still can't do well — noise/grain textures, or exact reproduction in a context that doesn't render CSS at all, like an email client with aggressive style stripping.

What the copy button actually copies

It's not just the gradient line. The copied CSS includes a background-color fallback set to your first color stop (by position, not by list order) — so an element still gets a solid, reasonable color even in a context where background-image gradients don't render. This is added automatically; you don't need to write it yourself.