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

[Canonical HTML page](https://gradiently.design/de/guide/css-hover-gradient)

Schreib einen neuen Verlauf in :hover, und er springt, statt weich zu wechseln. Browser können einen Verlauf nicht in einen anderen überführen, aber sie können ihn verschieben, ausblenden oder die Farben darin animieren. Hier ist jede Methode mit Code.

## The short version

- Ein CSS-Verlauf mit Hover-Effekt lässt sich nicht über eine Transition von background-image bauen, weil Browser Verläufe sofort austauschen, statt sie zu interpolieren.
- Die kompatibelste Technik ist ein übergroßer Verlauf mit einer Transition auf background-position, die neue Farben ins Bild schiebt.
- Farbstopps oder Winkel mit @property zu registrieren lässt den Browser sie weich überführen und funktioniert in allen aktuellen großen Browsern.
- Die Deckkraft eines zweiten Verlaufs auf einem Pseudo-Element einzublenden ist die günstigste Technik beim Rendern, weil Deckkraftwechsel nicht neu zeichnen.
- Hover-Effekte gehören in eine Hover-Media-Query und sollten prefers-reduced-motion respektieren.

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.

```css
/* 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);
}
```

Die transition-Zeile wird bei Verläufen ignoriert. Jede Technik unten umgeht das.

- Ruhezustand: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- Hover-Zustand: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

Die beiden Zustände aus den Beispielen. Ziel ist ein weicher Weg vom linken Farbfeld zum rechten.

## 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.

```css
.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%;
}
```

In Ruhe siehst du die linke Hälfte, Indigo zu Violett. Beim Hover gleitet die rechte Hälfte, Violett zu Pink, an ihren Platz.

Der ganze 200%-Streifen: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Das ist der ganze Hintergrund. Der Button zeigt immer nur eine Hälfte davon.

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](https://gradiently.design/de/guide/css-gradient-button) 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](https://gradiently.design/de/guide/css-property-animation).

```css
@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;
}
```

Jeder Stopp wechselt unabhängig. Gib ihnen verschiedene Dauern, und die Farbe scheint von einer Ecke zur anderen zu fließen.

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](https://gradiently.design/de/guide/css-gradient-border).

Beide bisherigen Techniken funktionieren auch bei [Verlaufstext](https://gradiently.design/de/guide/css-gradient-text). 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.

```css
.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;
}
```

`z-index: -1` mit `isolation: isolate` hält das Pseudo-Element hinter dem Text der Kachel, aber über ihrem Basisverlauf.

## 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.

```css
.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`);
   });
*/
```

Das Leuchten ist eine obere Ebene über einer dunklen Basis. Zwei Custom Properties zu aktualisieren ist günstig, aber jede Bewegung zeichnet neu, also nutze es bei wenigen Panels, nicht bei jeder Karte einer Seite.

## Eine Technik wählen

| Technik | Wirkt wie | Renderkosten | Am besten für |
| --- | --- | --- | --- |
| Verschieben mit background-position | Ein Schwung neuer Farbe | Zeichnet während des Übergangs neu | Buttons, Links, Tags |
| @property-Farbstopps | Farben, die sich an Ort und Stelle verschieben | Zeichnet während des Übergangs neu | Karten, Badges, Rahmen |
| Überblendung per Deckkraft | Ein Verlauf, der sich in einen anderen auflöst | Composited, kein Neuzeichnen | Große Panels, lange Raster |
| Cursor-Leuchten | Licht, das dem Zeiger folgt | Zeichnet bei jeder Bewegung neu | Einige Feature-Panels |

Im Zweifel überblenden. Es ist am günstigsten und funktioniert überall.

Für Verläufe, die sich von selbst statt beim Hover bewegen, siehe [animierte CSS-Verläufe](https://gradiently.design/de/guide/css-animated-gradient). Für das größere Bild, was Zeichenzeit kostet, siehe [Performance von CSS-Verläufen](https://gradiently.design/de/guide/css-gradient-performance).

## Touchscreens und reduzierte Bewegung

### Vermeiden

- Hover-Stile, die nach einem Tippen auf dem Smartphone hängen bleiben
- Informationen, die nur beim Hover erscheinen
- Lange, sich wiederholende Hover-Animationen
- Die Einstellung für reduzierte Bewegung ignorieren

### Machen

- Hover-Regeln in `@media (hover: hover)` packen
- Für Touch denselben Zustand bei `:active` zeigen
- Übergänge zwischen 200 und 500ms halten
- Unter `prefers-reduced-motion` Bewegung streichen, Farbwechsel behalten

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

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

Die Farbe wechselt weiterhin für alle; nur die Bewegung entfällt für Menschen, die weniger davon wollen.

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.

## FAQ

### Kann man einen CSS-Verlauf beim Hover animieren?

Nicht direkt. `background-image` wechselt sofort. Animiere `background-position` bei einem übergroßen Verlauf, registrierte Stopps mit `@property` oder die Deckkraft eines zweiten Verlaufs.

### Wie wechselt ein Verlaufsbutton beim Hover weich die Farbe?

Nutze `background-size: 200% 100%` mit einem Verlauf aus drei Stopps und animiere beim Hover `background-position` von `0% 50%` zu `100% 50%`.

### Funktioniert @property in allen Browsern?

Es funktioniert in aktuellen Versionen von Chrome, Edge, Safari und Firefox. Ältere Browser springen zwischen den Zuständen, statt weich zu wechseln.

### Welcher Verlaufs-Hover-Effekt ist am performantesten?

Eine Überblendung per Deckkraft: Der Hover-Verlauf liegt auf einem Pseudo-Element, und nur dessen Deckkraft ändert sich, was Neuzeichnen vermeidet.

### Sollten Verlaufs-Hover-Effekte reduzierte Bewegung respektieren?

Ja. Unter `prefers-reduced-motion: reduce` entfernst du die Bewegung und behältst einen einfachen Farbwechsel.