CSS Gradient Generator

About CSS gradients

A CSS gradient is a smooth interpolation between two or more colors painted directly by the browser — no image needed. Linear gradients sweep along a straight line at the angle you choose; radial gradients radiate from a center outwards. Each color stop has a position from 0% to 100% along the gradient line. Browsers blend everything in sRGB by default, so the more contrast there is between adjacent stops, the more visible the band of mixed tones in between.

How to use this generator

Pick a gradient type, then for linear adjust the angle (0° points up, 90° to the right, 180° down). Each row in Color stops has a color picker and a position — drag the slider, type a percentage, or click Add stop to insert a new color. Apply a Preset if you just want a quick starting palette. The CSS box below the preview shows the exact background declaration; click Copy and paste it into your stylesheet.

Design tips

Two-stop gradients between analogous colors (close on the color wheel) feel calm and modern. Three-stop gradients with one accent in the middle can feel rich but easily turn muddy — keep saturation similar across the stops. For dark UI backgrounds, pair a near-black with a dark hue at very low contrast (5–10% lightness difference) so the gradient is felt rather than seen. Always test your gradient with the actual content on top — text needs at least 4.5:1 contrast against any region of the gradient it overlaps.

Frequently asked questions

How many color stops can I add?

This tool caps at five stops, which covers virtually every UI gradient you will ever ship. CSS itself does not enforce a limit, but past 4–5 stops you usually lose more in muddiness than you gain in detail. If you need photographic transitions, consider an SVG mesh or a real image instead.

Why does my linear gradient look different from another tool's?

Different tools sometimes interpret the angle differently — the CSS spec uses 0° as up, 90° as right, but older Webkit syntax used a different reference. The output here uses the modern linear-gradient(deg, ...) form, which works in every current browser without prefixes.

Can I use this for dark mode?

Yes — pair the gradient with @media (prefers-color-scheme: dark) in your CSS and pick a darker stop set. You can also wrap the gradient declaration in CSS variables and switch the values per theme, which keeps the rest of your CSS untouched.

Do gradients hurt performance?

On modern hardware, no — they are painted on the GPU like any other background. Where you might notice a cost is on huge full-screen radial gradients animated at 60fps, or on very old mobile devices. For a static panel background, the cost is negligible.

Can I animate a gradient?

CSS does not animate background-image directly, but you can animate background-position on an oversized gradient, or use @property with custom properties to interpolate stop colors. Either way, prefer reduced-motion fallbacks for users who request them.

Are radial gradients supported everywhere?

Yes. linear-gradient() and radial-gradient() have shipped in every major browser for over a decade. The output here uses the standard form (no vendor prefixes) and works back to the earliest evergreen browsers.

CSS Gradient Generator