CSS Gradients That Don't Look Dated: 8 Practical Patterns With Copy-Paste Code

Gradients went out of fashion for a while because most of us used them badly: two saturated colours, a hard 90-degree angle, and a background that looked like a 2009 app icon. Used with restraint, they are one of the cheapest ways to add depth to a UI without loading a single image. Here are the patterns I actually reach for, with code you can paste straight into a stylesheet.

1. The quiet hero background

Pick two colours that sit close together on the colour wheel and use a diagonal angle. Low contrast reads as "polished"; high contrast reads as "loud".

.hero {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f8fafc;
}

2. Avoiding the grey "dead zone"

When you blend two complementary colours (blue to orange, say), the midpoint in sRGB passes through a dull grey. Two fixes: add a middle stop yourself, or interpolate in a perceptual colour space where browsers support it.

/* manual middle stop */
.banner { background: linear-gradient(90deg, #2563eb, #9333ea 50%, #f97316); }

/* modern browsers: interpolate in OKLCH */
.banner { background: linear-gradient(in oklch 90deg, #2563eb, #f97316); }

Keep the first line as a fallback above the second one so older browsers still get something sensible.

3. Soft spotlight with a radial gradient

A radial gradient positioned off-centre gives a subtle "light source" feel behind cards or pricing tables.

.section {
  background:
    radial-gradient(circle at 20% 10%, rgba(59,130,246,.25), transparent 40%),
    #0f172a;
}

Layering a radial gradient over a solid colour is easier to tune than a single complex gradient.

4. Gradient buttons that still pass contrast

The text has to be readable at both ends of the gradient. Check contrast against the lightest stop, not the average.

.btn {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  border: 0;
}
.btn:hover { background: linear-gradient(180deg, #1d4ed8, #1e40af); }

Background gradients cannot be transitioned smoothly in most browsers. If you want an animated hover, transition background-position on an oversized gradient instead:

.btn {
  background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
  background-size: 200% 100%;
  transition: background-position .4s ease;
}
.btn:hover { background-position: 100% 0; }

5. Gradient text

.headline {
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Use it for one headline per page at most, and keep a solid color fallback for forced-colours / high-contrast mode:

@media (forced-colors: active) { .headline { color: CanvasText; background: none; } }

6. Gradient borders without extra markup

.card {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #22c55e, #3b82f6) border-box;
  border-radius: 12px;
}

The first layer paints the inside, the second only shows through the transparent border.

7. Hard stops for stripes and progress bars

Two stops at the same position create a hard edge instead of a blend.

.progress {
  background: linear-gradient(90deg, #22c55e 0 65%, #e5e7eb 65% 100%);
}

Drive the percentage with a custom property (--value) and you have a dependency-free progress bar.

8. Fade-out overlays for long text

.clamp::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 4rem;
  background: linear-gradient(to bottom, transparent, var(--bg, #fff));
}

Common mistakes

• Too many stops. Three is usually the limit before it looks noisy.
• Pure black or pure white endpoints. Slightly tinted endpoints (#0f172a instead of #000) look far richer.
• Banding on large areas. Very dark, low-contrast gradients can band on some screens; a tiny noise texture or a slightly larger colour difference fixes it.
• Forgetting dark mode. Define gradient colours as custom properties so a dark theme can swap them in one place.

Tuning visually

I find it faster to nudge angles and stops visually than by editing numbers and refreshing. A free browser generator such as the one on ToolSphare lets you drag linear or radial stops, preview the result and copy the CSS; then paste it into one of the patterns above and adjust from there.

Gradients are at their best when nobody notices them. Start subtle, check contrast, and let them support the content instead of competing with it.

Muhammad Wasim, Founder & Developer, ToolSphare