CSS-Verlauf mit Hover-Effekt: vier Wege, ihn zu animieren

Ein CSS-Verlauf mit Hover-Effekt braucht einen Umweg, weil Browser background-image nicht animieren: Änderst du den Verlauf in :hover, springt er. Vier Techniken liefern ein weiches Ergebnis. Schieb einen übergroßen Verlauf mit background-position, animiere registrierte Farbstopps mit @property, blende einen zweiten Verlauf auf einem Pseudo-Element über oder bewege ein radiales Leuchten mit dem Cursor. Jede passt zu anderen Elementen, und alle stehen unten mit Code.

Warum transition bei Verläufen nicht funktioniert

Für den Browser ist ein Verlauf ein Bild. Er kann eine Zahl oder eine Farbe interpolieren, aber kein Bild in ein anderes, daher wird background-image nicht interpoliert, und der neue Verlauf ersetzt den alten sofort. Custom Properties im Verlauf verhalten sich genauso, solange du sie nicht registrierst, denn eine nicht registrierte Property ist nur Text.

/* This snaps, with no easing */
.btn {
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
  transition: background-image 400ms ease;
}
.btn:hover {
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
}

Technik 1: einen übergroßen Verlauf verschieben

Mach den Hintergrund größer als das Element, mal beide Zustände hinein und verschieb ihn dann. background-position lässt sich animieren, also gleiten die neuen Farben herein. Das funktioniert in jedem Browser und braucht keine Registrierung.

.btn {
  background-image: linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 500ms ease;
}

.btn:hover {
  background-position: 100% 50%;
}

Die Bewegung wirkt wie ein Schwung, das passt zu Buttons und Links. Bei großen Karten überzeugt sie weniger, weil man den Verlauf wandern sieht. Eine Animation von background-position zeichnet neu, was bei kleinen Elementen in Ordnung ist; für große Flächen nimm Technik 3. Verlaufsbuttons in CSS bietet weitere Button-Muster auf dieser Basis.

Technik 2: Farbstopps mit @property animieren

Registriere die Stoppfarben als typisierte Custom Properties, und der Browser kann sie interpolieren. Der Verlauf wechselt dann seine Farbe an Ort und Stelle, ohne Gleiten. @property funktioniert in allen aktuellen großen Browsern; ältere springen einfach, was für einen Hover ein akzeptabler Fallback ist. Die Registrierungsregeln stehen in CSS @property.

@property --stop-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1e1b4b;
}

@property --stop-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #6d28d9;
}

.card {
  background-image: linear-gradient(135deg, var(--stop-a), var(--stop-b));
  transition: --stop-a 450ms ease, --stop-b 450ms ease;
}

.card:hover {
  --stop-a: #6d28d9;
  --stop-b: #f472b6;
}

Derselbe Trick animiert den Winkel. Registriere --angle mit syntax: "<angle>", nutze es in linear-gradient(var(--angle), ...) und ändere es beim Hover: Ein Verlauf, der sich von 135 auf 225 Grad dreht, wenn der Zeiger kommt, ist ein dezenter, gepflegter Akzent für Karten und Verlaufsrahmen.

Beide bisherigen Techniken funktionieren auch bei Verlaufstext. Mit background-clip: text zugeschnittener Text zeigt, was immer der Hintergrund tut, sodass ein Verschieben oder ein Stoppwechsel an einer Überschrift die Farbe beim Hover durch die Buchstaben laufen lässt. Halte den Wechsel bei Überschriften, die gelesen werden müssen, sanft und sorg dafür, dass beide Zustände den Kontrast zur Seite erfüllen.

Technik 3: zwei Verläufe überblenden

Leg den Hover-Verlauf auf ein Pseudo-Element über der Basis und blende seine Deckkraft ein. Deckkraftwechsel übernimmt der Compositor ohne Neuzeichnen, daher ist das die weichste Wahl für große Karten, Hero-Panels und alles in einem langen Raster.

.tile {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
  opacity: 0;
  transition: opacity 400ms ease;
}

.tile:hover::before {
  opacity: 1;
}

Technik 4: ein Leuchten, das dem Cursor folgt

Ein mit Custom Properties positionierter radialer Verlauf kann dem Zeiger folgen. Setz --x und --y per kleinem Skript, und das Licht bewegt sich mit der Hand. Halte es weich und fern vom Text: Es soll wie Licht auf einer Fläche wirken, nie wie ein Heiligenschein um Worte.

.panel {
  background-image:
    radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), rgb(244 114 182 / 0.35), transparent 70%),
    linear-gradient(135deg, #1e1b4b, #312e81);
}

/* JavaScript:
   panel.addEventListener("pointermove", (e) => {
     const r = panel.getBoundingClientRect();
     panel.style.setProperty("--x", `${e.clientX - r.left}px`);
     panel.style.setProperty("--y", `${e.clientY - r.top}px`);
   });
*/

Eine Technik wählen

Für Verläufe, die sich von selbst statt beim Hover bewegen, siehe animierte CSS-Verläufe. Für das größere Bild, was Zeichenzeit kostet, siehe Performance von CSS-Verläufen.

Touchscreens und reduzierte Bewegung

@media (hover: hover) {
  .btn:hover { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Hover-Effekte erwecken eine Website zum Leben. In Social Posts gibt es keinen Zeiger, also muss die Bewegung im Design selbst stecken. Gradiently Marks können ihre eigene sanfte Bewegung mitbringen, und mit Pro wird ein Design als MP4, WebM oder GIF exportiert, wo der Browser Aufnahmen unterstützt, bereit für eine Story oder einen Post.