30 CSS Gradient Background Ideas with Code Examples

CSS Gradient Quick Reference

CSS provides three native gradient functions. All are values for the background or background-image property - they are images, not colors.

/* Linear - straight direction */
background: linear-gradient(direction, color-stop1, color-stop2, ...);

/* Radial - outward from a center point */
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

/* Conic - rotates around a center point */
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Multiple gradients - comma-separated, first is topmost */
background:
  radial-gradient(...),
  linear-gradient(...);

Animated Gradients

CSS gradients themselves cannot be interpolated (browsers can't tween between gradient values directly), but you can animate them by oversizing the background and shifting its position with background-position, or by animating a hue-rotate filter.

Method 1 - Moving background-position

.animated-gradient {
  background: linear-gradient(
    270deg,
    #667eea, #764ba2, #f093fb, #f5576c
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

Method 2 - hue-rotate filter

.hue-animated {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: hue-cycle 6s linear infinite;
}

@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

Method 3 - CSS custom property + @property

/* Modern approach - fully interpolatable */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: conic-gradient(
    from var(--angle),
    #667eea, #764ba2, #f093fb, #667eea
  );
  animation: rotate-hue 4s linear infinite;
}

@keyframes rotate-hue {
  to { --angle: 360deg; }
}

Tips for Accessible Gradient Text

Gradient backgrounds create variable contrast - the contrast ratio at one end may pass WCAG AA while the other end fails. Follow these practices to keep your gradients accessible.

• 1.Test contrast at the lightest AND darkest gradient stop. Both must meet a minimum 4.5:1 ratio for body text.
• 2.Add a semi-transparent overlay (rgba(0,0,0,0.4)) between the gradient and text to lock the contrast regardless of gradient colour.
• 3.Use white or near-white text on dark gradients and dark text on very light or pastel gradients.
• 4.Avoid placing body text directly on a vibrant multi-stop gradient - reserve it for decorative sections only.

/* Safe gradient + text pattern */
.hero {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* contrast booster */
}

.hero-content {
  position: relative; /* above the ::after overlay */
  color: #fff;
}

/* Gradient text (decorative, not body copy) */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}