Stop hand-writing linear-gradient() at 11pm

You need a hero background by tomorrow. You know the three brand HEX values. You still spend twenty minutes getting the angle, stop positions, and -webkit- prefix right, then notice banding on a coworker's MacBook.

CSS gradients are not hard. Tweaking them blind is. A live preview plus copy-paste output beats guessing in DevTools.

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors defined as a paint server for background (or border-image, etc.). The browser interpolates between color stops at specified positions.

Unlike image backgrounds, gradients scale cleanly and weigh almost nothing in the bundle. They also fail accessibility checks if you put text directly on them without checking contrast at every point.

Three types cover most product and marketing UI:

Linear gradients: angles and stop positions

linear-gradient() transitions colors along a line. The angle controls direction:

• 0deg → upward
• 90deg → toward the right
• 135deg → common diagonal for hero sections

background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);

Use linear gradients for page heroes, section dividers, and card overlays. If text sits on top, pick stops that leave a region dark or light enough for legible copy, or place text on a solid card.

Try the linear gradient generator or switch types in the main CSS gradient tool.

Radial gradients: glows and spotlights

radial-gradient() radiates from a center point. Good for circular badges, spotlight effects, and soft vignettes.

background: radial-gradient(circle, #FFFFFF 0%, #7C3AED 100%);

Center position and ellipse vs circle matter for non-square containers. Preview beats memorizing syntax.

Conic gradients: sweeps and charts

conic-gradient() rotates hues around a center. Pie charts, loading indicators, and angular brand motifs use this.

background: conic-gradient(from 90deg, #FF512F, #F09819, #FF512F);

Less common in marketing pages, more common in dashboards and data UI.

Dedicated pages: radial and conic generators.

Choosing gradient color stops

A stop is a color plus an optional position along the gradient line. MDN's linear-gradient reference is the syntax. CSS Images Level 4 is the rule for what the browser does when you leave positions out. Picking stops is where gradients go muddy or fail contrast.

1. Decide where text will sit before you pick colors. If a headline crosses the whole hero, every stop under those glyphs has to be dark enough or light enough. If you cannot make that true, put the type on a solid card and let the gradient be decoration. WCAG contrast is defined between text and the background behind it (understanding 1.4.3). A gradient is many backgrounds. Check the lightest and darkest point the text can occupy in the contrast checker.
2. Put the first and last stops at the ends unless you want a solid band. 0% and 100% use the whole element. A first stop at 20% paints a solid color from the start edge until that stop, then blends. That is useful for a header bar. It is accidental when you meant a full fade.
3. Let the spec fill in missing positions, and know the fixup. If you omit positions, CSS Images 4 spaces the missing stops evenly between the ones you did set. If a later stop is positioned before an earlier one, the earlier stop is moved forward so positions never go backwards — the transition becomes a hard edge. linear-gradient(red 20px, white 0px, blue 40px) is treated as white at 20px, not at 0. Do not rely on that fixup to design a stripe. Set the positions you mean.
4. Add a middle stop when the endpoints are far apart in hue. Two saturated colors on opposite sides of the wheel, interpolated in sRGB, often pass through a dull gray in the middle. A third stop near 50%, chosen by eye, keeps a hue in that region. Three stops are enough for most heroes. Five is for a mesh you are willing to maintain.
5. Change the interpolation space when the midpoint must stay vivid. By default the blend is in sRGB. CSS Images 4 allows a color interpolation method on the gradient, and CSS Color Level 4 defines the spaces, including Oklch. linear-gradient(in oklch, #5B21B6, #F59E0B) keeps a more even path than the sRGB blend of the same two hex values. Older browsers that do not understand the in syntax ignore the rule if you do not also provide a plain gradient as a fallback. Put the fallback first:

background: linear-gradient(135deg, #5B21B6, #F59E0B);
background: linear-gradient(in oklch, #5B21B6, #F59E0B);

6. Match stops to a palette instead of sampling the hero. Build the colors in the palette generator, then open them in the gradient tool. Stops taken from steps 700, 500, and 200 of one scale stay in one family. Stops sampled from three unrelated brands do not.
7. For print, throw stops away until a few flat colors remain. A CSS gradient will not survive a press as a continuous blend. Pick the stops that matter, convert those hex values, and read the CMYK-safe palettes guide. Do not send a screenshot of the hero as the print file.

The same stop list works for radial and conic gradients. What changes is the shape of the line, not the decision about which colors are allowed to sit under text.

Two-color vs three-color gradients

Two stops are enough for minimal heroes. Three stops (popularized by tools like MyColor.space) add a mid-tone so the transition does not look muddy between distant hues.

Color Mapper supports 2-color mode, 3-color mode, and up to five stops with position sliders when you need fine control.

From palette to gradient without retyping HEX

Manual copy-paste between tools is where typos happen.

1. Build colors in the palette generator.
2. Click Open in Gradient, or append ?colors=5B21B6,7C3AED,C4B5FD to the gradient URL.
3. Adjust angle and stop positions with live preview.
4. Copy the full CSS block including vendor prefixes for older WebKit.

Starting from a photo? Extract dominant colors with palette from image, then pass the same query string to the gradient tool.

Gradients, accessibility, and print

Accessibility: WCAG contrast is measured between two solid colors. A gradient background means the ratio changes across the text box. Test the lightest and darkest areas your copy might sit on using the contrast checker. If either fails, move text to a solid card or simplify the gradient behind it.

Print: Gradients are a screen medium. Continuous blends posterize on press. For print deliverables, extract flat fills from key stops and verify in the HEX to CMYK converter. Do not send a CSS gradient screenshot and expect it to match on coated stock.

Vendor prefixes and Tailwind arbitrary values

Modern browsers handle standard syntax well. Older Safari sometimes needed -webkit-linear-gradient. The gradient generator includes prefixes in the copy output when relevant.

In Tailwind v3+, arbitrary values work for one-offs:

<div class="bg-[linear-gradient(135deg,#5B21B6_0%,#C4B5FD_100%)]">...</div>

For repeated patterns, put the generated rule in @layer utilities or your global CSS instead of long arbitrary classes.

FAQ

Open the CSS gradient generator, import your palette, tweak until the preview looks clean on your target devices, and paste the CSS. The hero section is the easy part again.