Morphing Gradient Background: CSS Animated Background

Morphing Gradient Background

A three color gradient that turns its angle and changes its colors at the same time, easing between three palettes. The angle and colors are registered with @property, so they really interpolate.

Also known as: css morphing gradient, gradient angle animation css, animate gradient colors css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-morphing-gradient" aria-hidden="true"></div>

CSS

@property --bgx-morphing-gradient-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}
@property --bgx-morphing-gradient-c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #3b82f6;
}
@property --bgx-morphing-gradient-c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #a855f7;
}
@property --bgx-morphing-gradient-c3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #f97316;
}
.bgx-morphing-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--bgx-morphing-gradient-a), var(--bgx-morphing-gradient-c1), var(--bgx-morphing-gradient-c2), var(--bgx-morphing-gradient-c3));
  animation: bgx-morphing-gradient-morph 12s ease-in-out -2s infinite;
}
@keyframes bgx-morphing-gradient-morph {
  0% {
    --bgx-morphing-gradient-a: 135deg;
    --bgx-morphing-gradient-c1: var(--c);
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.62 0.22 calc(h + 60));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.78 0.15 calc(h + 130));
  }
  33% {
    --bgx-morphing-gradient-a: 255deg;
    --bgx-morphing-gradient-c1: oklch(from var(--c) 0.74 0.16 calc(h - 60));
    --bgx-morphing-gradient-c2: var(--c);
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.68 0.21 calc(h + 60));
  }
  66% {
    --bgx-morphing-gradient-a: 375deg;
    --bgx-morphing-gradient-c1: oklch(from var(--c) 0.7 0.19 calc(h + 30));
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.8 0.15 calc(h + 100));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.76 0.15 calc(h + 170));
  }
  100% {
    --bgx-morphing-gradient-a: 495deg;
    --bgx-morphing-gradient-c1: var(--c);
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.62 0.22 calc(h + 60));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.78 0.15 calc(h + 130));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-morphing-gradient, .bgx-morphing-gradient *, .bgx-morphing-gradient::before, .bgx-morphing-gradient::after, .bgx-morphing-gradient *::before, .bgx-morphing-gradient *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Morphing Gradient Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds