Gradient Creator

How to build a CSS gradient

Choose Linear or Radial from the type dropdown, then set the color stops below the preview — each stop has its own color swatch and a position slider from 0% to 100%. Add as many stops as you need with + Add stop, drag any slider to reposition it, or remove one with the ✕ button (a gradient always needs at least two). For a linear gradient, the Angle slider rotates the direction from 0° to 360°; radial gradients ignore the angle and spread outward from the center instead. The CSS on the right updates on every change, ready to copy straight into a stylesheet with one click.

Not sure where to start? Hit 🎲 Randomize to swap every stop for a harmonious random set and iterate from there.

Linear vs radial — and how CSS gradients actually work

A CSS linear-gradient() blends colors along a straight line at a given angle — 90deg runs left to right, 180deg top to bottom — and is the workhorse for buttons, hero backgrounds and subtle depth on cards. A radial-gradient() blends outward from a center point in expanding rings instead, which reads as a spotlight or a glow and suits badges, callouts and decorative backgrounds better than long rectangular sections. Both accept any number of color stops with explicit percentage positions, which is exactly what this generator's stop list controls — the CSS this tool outputs is standard, unprefixed syntax that every modern browser supports natively, no vendor prefixes required.

Gradient generator use cases

• Hero sections and banners — a soft multi-stop linear gradient adds depth without a background image.
• Buttons and CTAs — a subtle two-stop gradient gives a flat color more visual weight on hover and press states.
• Badges and highlights — a radial gradient reads as a glow or spotlight behind an icon or number.
• Loading states and skeletons — animate a gradient's stop positions for a shimmer effect.

Pick gradient stop colors that actually work together by starting from the color wheel or a scheme from the palette generator — a complementary or analogous pair usually makes a cleaner gradient than two arbitrary colors. Want to see every step between two colors as discrete swatches instead of a smooth blend? The color mixer does exactly that.

Choosing gradient stop positions

Where you place the stops matters as much as which colors you pick. Two stops at 0% and 100% give a perfectly even blend, which can look flat over a large area. Nudging the stops inward — say 20% and 80% — creates solid bands of color at each end with the transition concentrated in the middle, which reads as more intentional for a hero section. Adding a third stop of the same color as one of the ends, positioned near the middle, lets you bias the whole gradient toward that color without changing its endpoints. For subtle depth on a card or button, keep the two stops close in lightness and only a few percent of hue apart; the human eye reads that as a gentle sheen rather than a "gradient."

Gradient performance and accessibility

CSS gradients are drawn by the GPU and cost nothing to load — no image request, no extra bytes beyond the declaration — so they're almost always a better choice than a background image for flat color transitions. Two things to watch: first, banding can appear on large, low-contrast gradients on 8-bit displays; adding a very slight noise texture or a third stop helps. Second, if you put text over a gradient, check the text color against both ends in the contrast checker, because a pairing that passes at the light end can fail at the dark end. When a gradient is purely decorative, it needs no alt text; when it carries meaning (a status bar, a progress fill), make sure that meaning is also conveyed without relying on the color.

Gradient generator FAQ