Gradient Background Animation

Technique 1: background-position shift

The most compatible and performant approach. Render a gradient larger than the container and animate its position. Uses GPU compositing — no layout repaints.

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

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 6s ease infinite;
}

Performance: Excellent. GPU-composited, no layout recalculation.

Technique 2: hue-rotate filter

Apply filter: hue-rotate() animation to a gradient element. Simple one-liner, but shifts ALL colors in the element including text.

@keyframes hue-spin {
  to { filter: hue-rotate(360deg); }
}

.hue-gradient {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  animation: hue-spin 8s linear infinite;
}

Performance: Good. GPU compositing. Side-effect: shifts child element colors too.

Technique 3: @property custom properties

CSS Houdini's @property lets you animate custom properties that represent colors — enabling true color interpolation within gradients. Modern browsers only (Chrome 85+, Safari 16.4+).

@property --gradient-start {
  syntax: '<color>';
  initial-value: #3b82f6;
  inherits: false;
}

@property --gradient-end {
  syntax: '<color>';
  initial-value: #8b5cf6;
  inherits: false;
}

@keyframes color-shift {
  0%   { --gradient-start: #3b82f6; --gradient-end: #8b5cf6; }
  50%  { --gradient-start: #ec4899; --gradient-end: #f97316; }
  100% { --gradient-start: #3b82f6; --gradient-end: #8b5cf6; }
}

.property-gradient {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  animation: color-shift 4s ease infinite;
}

Performance: Good in supporting browsers. Allows true color animation without JS.

Technique 4: conic-gradient rotation

Rotating a conic gradient with transform: rotate() creates a spinning gradient effect — useful for loading indicators and decorative backgrounds.

@keyframes conic-spin {
  to { transform: rotate(360deg); }
}

.conic-bg {
  background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
  animation: conic-spin 4s linear infinite;
}

Performance: Excellent — transform animations use GPU compositing exclusively.

Exporting animated gradients

For platforms that don't support CSS (social media, video, email), export your animated gradient as an MP4 or WebM. Gradient Studio's Pro plan includes video export at up to 1080p.