Gradient Backgrounds for Websites

Hero section gradients

Hero sections are the most common use case for full-bleed gradients. The pattern that converts best: a dark diagonal gradient from top-left to bottom-right, with high-contrast text on top.

.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  min-height: 100vh;
}

For animated hero gradients, shift the background-position instead of animating colors — it's GPU-accelerated and doesn't trigger layout.

Section dividers with gradients

Gradient section backgrounds create visual hierarchy between page sections without hard edges. A subtle opacity fade into a different color reads as a natural transition:

.section-alt {
  background: linear-gradient(180deg, #0a0a0a 0%, #111827 100%);
}

Card and UI element gradients

Subtle gradients on cards (1–3% opacity difference) add a glassy, dimensional feel without visual noise. The trick is keeping the gradient nearly invisible — the brain perceives the depth without consciously registering the gradient.

.card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.01) 100%
  );
  border: 1px solid rgba(255,255,255,0.06);
}

Radial gradients for spotlight effects

Radial gradients create a natural spotlight or glow effect — useful for drawing attention to a center element or CTA.

.spotlight {
  background: radial-gradient(
    ellipse 80% 50% at 50% -20%,
    rgba(120, 119, 198, 0.3),
    transparent
  );
}

Accessibility: contrast over gradients

Text over gradients must maintain a 4.5:1 contrast ratio (WCAG AA) at every point along the gradient — not just the center. Check the darkest AND lightest values. Safe pattern: use a gradient on a background layer and keep text on a solid or semi-opaque overlay.

Performance notes

• CSS gradients are zero-download — no image request, no bytes transferred
• Animated CSS gradients via background-position shift use GPU compositing
• Avoid animating background-color directly — use opacity or transform instead
• For complex mesh gradients, export a compressed WebP and use it as a static background