# CSS-verloop hover-effect: vier manieren om het te animeren

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

Schrijf een nieuw verloop in :hover en het springt in plaats van te glijden. Browsers kunnen het ene verloop niet in het andere laten overgaan, maar wel een verloop verschuiven, laten infaden of de kleuren erin animeren. Hier is elke methode, met code.

## The short version

- Een CSS-verloop hover-effect kun je niet maken door background-image te laten overgaan, omdat browsers verlopen direct verwisselen in plaats van ze te interpoleren.
- De meest compatibele techniek is een te groot verloop met een transition op background-position, waarmee nieuwe kleuren in beeld schuiven.
- Kleurstops of hoeken registreren met @property laat de browser ze soepel laten overgaan, en werkt in alle huidige grote browsers.
- De dekking van een tweede verloop op een pseudo-element laten infaden is de goedkoopste techniek om te renderen, omdat veranderingen in dekking niet opnieuw tekenen.
- Hover-effecten horen in een hover-mediaquery te staan en prefers-reduced-motion te respecteren.

Een **CSS-verloop hover-effect** heeft een omweg nodig, want browsers laten `background-image` niet overgaan: verander het verloop in `:hover` en het springt. Vier technieken geven een soepel resultaat. Schuif een te groot verloop met `background-position`, animeer geregistreerde kleurstops met `@property`, laat een tweede verloop op een pseudo-element crossfaden, of verplaats een radiale gloed met de cursor. Elke past bij andere elementen, en alle staan hieronder met code.

## Waarom transition niet werkt op verlopen

Voor de browser is een verloop een afbeelding. Hij weet hoe hij een getal of een kleur interpoleert, maar niet de ene afbeelding in de andere, dus `background-image` wordt niet geïnterpoleerd en het nieuwe verloop vervangt het oude direct. Custom properties binnen het verloop gedragen zich hetzelfde, tenzij je ze registreert, omdat een niet-geregistreerde property gewoon tekst is.

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

De transition-regel wordt voor verlopen genegeerd. Elke techniek hieronder werkt hier omheen.

- Beginstaat: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- Hoverstaat: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

De twee staten die in de voorbeelden worden gebruikt. Het doel is een soepele reis van het linkerstaaltje naar het rechter.

## Techniek 1: een te groot verloop verschuiven

Maak de achtergrond groter dan het element, schilder beide staten erin en verschuif hem dan. `background-position` kan overgaan, dus de nieuwe kleuren glijden binnen. Het werkt in elke browser en vraagt geen registratie.

```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 rust zie je de linkerhelft, indigo naar violet. Bij hover schuift de rechterhelft, violet naar roze, op zijn plek.

De volledige strook van 200%: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Dit is de hele achtergrond. De knop toont er maar de helft van tegelijk.

De beweging leest als een veeg, wat past bij knoppen en links. Het is minder overtuigend op grote kaarten, waar je het verloop ziet reizen. `background-position` animeren tekent opnieuw, wat prima is voor kleine elementen; gebruik voor een groot oppervlak techniek 3. [Verloopknoppen in CSS](https://gradiently.design/nl/guide/css-gradient-button) heeft meer knoppatronen hierop gebouwd.

## Techniek 2: kleurstops animeren met @property

Registreer de stopkleuren als getypeerde custom properties en de browser kan ze interpoleren. Het verloop verandert dan ter plekke van kleur, zonder schuiven. `@property` werkt in alle huidige grote browsers; oudere springen gewoon, wat een acceptabele terugval is voor een hover. De registratieregels staan in [CSS @property](https://gradiently.design/nl/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;
}
```

Elke stop vloeit onafhankelijk. Geef ze verschillende duurtijden en de kleur lijkt van de ene hoek naar de andere te stromen.

Dezelfde truc animeert de hoek. Registreer `--angle` met `syntax: "<angle>"`, gebruik hem in `linear-gradient(var(--angle), ...)` en verander hem bij hover: een verloop dat van 135 naar 225 graden draait als de aanwijzer arriveert is een subtiele, verzorgde toets voor kaarten en [verloopranden](https://gradiently.design/nl/guide/css-gradient-border).

Beide technieken tot nu toe werken ook op [verlooptekst](https://gradiently.design/nl/guide/css-gradient-text). Tekst die met `background-clip: text` is uitgesneden toont wat de achtergrond doet, dus een schuifbeweging of stopovergang op een kop laat de kleur bij hover door de letters lopen. Houd de verandering mild op koppen die mensen moeten lezen, en zorg dat beide staten contrast houden tegen de pagina.

## Techniek 3: twee verlopen crossfaden

Zet het hover-verloop op een pseudo-element boven de basis en laat de dekking infaden. Veranderingen in dekking worden door de compositor afgehandeld zonder opnieuw tekenen, dus dit is de soepelste keuze voor grote kaarten, hero-panelen en alles in een lang 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` met `isolation: isolate` houdt het pseudo-element achter de tekst van de tegel maar boven het basisverloop.

## Techniek 4: een gloed die de cursor volgt

Een radiaal verloop dat met custom properties wordt gepositioneerd kan de aanwijzer volgen. Stel `--x` en `--y` in met een klein script en het licht beweegt met de hand mee. Houd het zacht en uit de buurt van tekst: het moet voelen als licht op een oppervlak, nooit als een halo rond woorden.

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

De gloed is een bovenste laag over een donkere basis. Twee custom properties bijwerken is goedkoop, maar elke beweging tekent opnieuw, dus gebruik het op een paar panelen, niet op elke kaart van een pagina.

## Een techniek kiezen

| Techniek | Ziet eruit als | Renderkosten | Het best voor |
| --- | --- | --- | --- |
| Schuiven met background-position | Een veeg nieuwe kleur | Tekent opnieuw tijdens de overgang | Knoppen, links, tags |
| @property-kleurstops | Kleuren die ter plekke verschuiven | Tekent opnieuw tijdens de overgang | Kaarten, badges, randen |
| Dekking-crossfade | Het ene verloop dat in het andere oplost | Samengesteld, geen hertekening | Grote panelen, lange rasters |
| Cursorgloed | Licht dat de aanwijzer volgt | Tekent bij elke beweging opnieuw | Een paar uitgelichte panelen |

Twijfel je, gebruik dan de crossfade. Hij is het goedkoopst en werkt overal.

Voor verlopen die uit zichzelf bewegen in plaats van bij hover, zie [geanimeerde CSS-verlopen](https://gradiently.design/nl/guide/css-animated-gradient). Voor het bredere beeld van wat tekentijd kost, zie [CSS-verloopprestaties](https://gradiently.design/nl/guide/css-gradient-performance).

## Touchschermen en verminderde beweging

### Vermijd

- Hoverstijlen die blijven hangen na een tik op telefoons
- Informatie die alleen bij hover verschijnt
- Lange, herhalende hoveranimaties
- De instelling voor verminderde beweging negeren

### Doe

- Zet hoverregels in `@media (hover: hover)`
- Toon dezelfde staat op `:active` voor touch
- Houd overgangen tussen 200 en 500 ms
- Haal beweging weg onder `prefers-reduced-motion`, houd de kleurverandering

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

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

De kleur verandert nog steeds voor iedereen; alleen de beweging verdwijnt voor mensen die om minder vroegen.

Hover-effecten brengen een website tot leven. Op socialposts is er geen aanwijzer, dus beweging moet in het ontwerp zelf zitten. De Marks van Gradiently kunnen hun eigen rustige beweging dragen, en met Pro exporteert een ontwerp als MP4, WebM of GIF waar de browser opnemen ondersteunt, klaar voor een story of een post.

## FAQ

### Kun je een CSS-verloop laten overgaan bij hover?

Niet rechtstreeks. `background-image` verandert direct. Laat `background-position` overgaan op een te groot verloop, animeer geregistreerde stops met `@property`, of laat de dekking van een tweede verloop infaden.

### Hoe laat ik een verloopknop soepel van kleur veranderen bij hover?

Gebruik `background-size: 200% 100%` met een verloop van drie stops en laat dan `background-position` bij hover overgaan van `0% 50%` naar `100% 50%`.

### Werkt @property in alle browsers?

Het werkt in huidige versies van Chrome, Edge, Safari en Firefox. Oudere browsers springen tussen staten in plaats van te glijden.

### Wat is het meest performante verloop hover-effect?

Een dekking-crossfade: het hover-verloop staat op een pseudo-element en alleen de dekking verandert, wat hertekenen voorkomt.

### Moeten verloop hover-effecten verminderde beweging respecteren?

Ja. Haal onder `prefers-reduced-motion: reduce` de beweging weg en houd een eenvoudige kleurverandering.