Gradients

CSS · Reference cheat sheet

📋 Overview

Gradients are images generated by CSS—usable anywhere background-image or mask-image accepts an image. The main types are linear, radial, conic, and their repeating variants. Use gradients for soft backgrounds, scrims over photos, progress fills, and decorative accents without exporting bitmap assets.

Modern color stops work well in oklch / oklab for perceptually even blends; color-mix() helps derive stop colors from tokens.

🔧 Core concepts

Gradient functions

Linear syntax

linear-gradient(
  [ to <side-or-corner> | <angle> ],
  <color-stop-list>
)

Examples: to bottom, to top right, 135deg. Color stops: color, optional position (30%, 4rem).

Radial & conic

Multiple layers

Gradients stack like any background images—list them first for overlays, solid color last as fallback.

💡 Examples

Soft page wash

body {
  background-color: oklch(0.98 0.01 100);
  background-image: linear-gradient(
    160deg,
    oklch(0.95 0.03 250),
    oklch(0.98 0.01 100) 45%,
    oklch(0.96 0.03 40)
  );
  background-attachment: fixed;
}

Image scrim

.hero {
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 55%),
    url("/hero.jpg") center / cover no-repeat;
}

Conic chart / progress ring base

.pie {
  inline-size: 8rem;
  block-size: 8rem;
  border-radius: 50%;
  background: conic-gradient(
    oklch(0.6 0.18 250) 0 72%,
    oklch(0.9 0.02 250) 0
  );
}

Striped repeating pattern

.stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgb(0 0 0 / 0.06) 6px,
    rgb(0 0 0 / 0.06) 12px
  );
}

⚠️ Pitfalls

• Hard-coding left/right in gradients for i18n UIs—prefer to inline-end where supported, or logical design tokens.
• Using too many stops in sRGB that band or look muddy—try oklch stops for smoother ramps.
• Forgetting a solid background-color underneath for print, email, or failed paint.
• Animating gradient stop positions poorly (often not interpolatable)—animate opacity / overlays instead.
• Applying huge fixed gradients on body with background-attachment: fixed on low-end mobile GPUs.

🔗 Related

• Background
• Effects
• Images
• Buttons