CSS gradient patterns that actually look good (and the two that don't)

The two patterns to avoid

1. Two colors at 45°. The default output of most gradient tools. Instantly reads as "generic startup landing page". Not wrong - but you'll never win a design award with it.

2. Rainbow at 45°. Purple to pink to orange. Was fresh in 2016 (Instagram's rebrand). Now everywhere. Use only if your product is deliberately playful.

Patterns that hold up in 2026

Multi-stop with a hue shift. Instead of blue → cyan, do blue → indigo → violet. Adjacent hues on the color wheel produce a shift that feels natural rather than a straight line through gray. The eye reads it as depth.

background: linear-gradient(135deg,
  #1e40af 0%,
  #4338ca 40%,
  #7c3aed 100%);

Off-axis linear. 135° is the default. Try 200° or 20°. The asymmetry stops the gradient from looking generic.

Mesh gradients (fake). Pure CSS can't do a Figma-style mesh gradient, but layered radial gradients get most of the way there:

background:
  radial-gradient(circle at 20% 20%, #ff006e 0%, transparent 40%),
  radial-gradient(circle at 80% 30%, #8338ec 0%, transparent 40%),
  radial-gradient(circle at 50% 100%, #3a86ff 0%, transparent 40%),
  #0b1220;

That's four background layers stacked, each fading to transparent. The base color under everything anchors the look. This is the pattern behind 712tools' own hero section - soft, atmospheric, no obvious diagonal line.

Very-subtle single-color. Two shades of the same color, one stop, low contrast. Reads as "lit" rather than "gradient". Great behind cards and modals.

background: linear-gradient(180deg, #f8fafc, #f1f5f9);

Conic gradients for meters/pie charts. conic-gradient is the CSS-only way to do circular progress rings, hue wheels, and pie charts. Widely supported since 2020.

background: conic-gradient(#22c55e 0deg 200deg, #e5e7eb 200deg 360deg);
border-radius: 50%;

Accessibility: contrast still matters

A pretty gradient behind white text becomes unreadable when the gradient passes through light values. Two fixes:

• Overlay a semi-transparent dark layer over the gradient, then put white text on that.
• Use a very tight brightness range - two colors that are both dark, or both light, stay legible under any text.

Contrast checkers only measure the top and bottom colors of a gradient. The middle can fail even if both ends pass; the eye reads whatever's under the letter.

Banding is the biggest quality tell

Cheap gradients show visible "bands" where the color steps between values. Two fixes:

• Add subtle noise as a background-image overlay (a low-opacity PNG texture or SVG turbulence filter).
• Use in oklch for the interpolation - modern browsers interpolate in the OKLCH color space, which produces perceptually smoother transitions than RGB:

background: linear-gradient(135deg in oklch, #1e40af, #7c3aed);

Browser support for interpolation modifiers is Chrome/Edge/Safari 16.2+ and Firefox 128+. Fall back gracefully.

Getting the colors right

Gradients need color pairs that already work together. Random hex codes rarely do. Start with a real palette:

• Pick two colors that are close on the color wheel (analogous) for calm, natural gradients.
• Pick two colors opposite on the wheel (complementary) for energetic, high-contrast gradients.
• Never pick two colors of very different saturation - the mid-gradient turns muddy.

Color Palette Generator produces coordinated palettes; use adjacent swatches from those as gradient stops.

CSS Gradient Generator previews live, supports linear/radial/conic, and copies production-ready CSS - including the multi-stop patterns above.

Related tools:

• Color Converter - to shift a hex color slightly (nudge hue for smoother gradients).
• Color Palette Generator - for the source colors.