# Hover-effekt med CSS-gradient: fire måter å animere den på

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

Skriv en ny gradient i :hover, og den hopper i stedet for å gli over. Nettlesere kan ikke animere én gradient over i en annen, men de kan flytte den, tone den ut eller animere fargene inni den. Her er hver metode, med kode.

## The short version

- En hover-effekt med CSS-gradient kan ikke lages ved å animere background-image, fordi nettlesere bytter gradienter umiddelbart i stedet for å interpolere dem.
- Den mest kompatible teknikken er en overdimensjonert gradient med transition på background-position, som skyver nye farger inn i bildet.
- Når du registrerer fargestopp eller vinkler med @property, kan nettleseren animere dem jevnt, og det virker i alle store nettlesere i dag.
- Å tone opasiteten til en ekstra gradient på et pseudoelement er den billigste teknikken å tegne, fordi endringer i opasitet ikke krever ny maling.
- Hover-effekter bør ligge i en mediespørring for hover og respektere prefers-reduced-motion.

En **hover-effekt med CSS-gradient** krever en omvei, fordi nettlesere ikke animerer `background-image`: bytter du gradienten i `:hover`, hopper den. Fire teknikker gir et jevnt resultat. Skyv en overdimensjonert gradient med `background-position`, animer registrerte fargestopp med `@property`, krysston en ekstra gradient på et pseudoelement, eller flytt en radiell glød med pekeren. Hver passer til ulike elementer, og alle står nedenfor med kode.

## Hvorfor transition ikke virker på gradienter

For nettleseren er en gradient et bilde. Den vet hvordan et tall eller en farge interpoleres, men ikke ett bilde over i et annet, så `background-image` interpoleres ikke, og den nye gradienten erstatter den gamle med en gang. Egendefinerte egenskaper inne i gradienten oppfører seg likt med mindre du registrerer dem, fordi en uregistrert egenskap bare er tekst.

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

Transition-linjen ignoreres for gradienter. Hver teknikk nedenfor går rundt dette.

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

De to tilstandene som brukes i eksemplene. Målet er en jevn reise fra fargeprøven til venstre til den til høyre.

## Teknikk 1: skyv en overdimensjonert gradient

Gjør bakgrunnen større enn elementet, mal begge tilstandene inn i den og flytt den. `background-position` kan animeres, så de nye fargene glir inn. Det virker i alle nettlesere og krever ingen registrering.

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

I hvile ser du venstre halvdel, indigo til fiolett. Ved hover glir høyre halvdel, fiolett til rosa, på plass.

Hele stripen på 200 %: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Dette er hele bakgrunnen. Knappen viser aldri mer enn halvparten av den om gangen.

Bevegelsen oppleves som et sveip, som passer til knapper og lenker. Den er mindre overbevisende på store kort, der du ser gradienten forflytte seg. Å animere `background-position` krever ny maling, som er greit for små elementer; for en stor flate bruker du teknikk 3. [Gradientknapper i CSS](https://gradiently.design/nb/guide/css-gradient-button) har flere knappemønstre bygd på dette.

## Teknikk 2: animer fargestopp med @property

Registrer stoppfargene som typede egendefinerte egenskaper, så kan nettleseren interpolere dem. Gradienten skifter da farge på stedet, uten å gli. `@property` virker i alle store nettlesere i dag; eldre hopper bare, som er en akseptabel reserve for en hover. Reglene for registrering står i [CSS @property](https://gradiently.design/nb/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;
}
```

Hvert stopp myknes uavhengig. Gi dem ulik varighet, så ser fargen ut til å flyte fra det ene hjørnet til det andre.

Samme triks animerer vinkelen. Registrer `--angle` med `syntax: "<angle>"`, bruk den i `linear-gradient(var(--angle), ...)` og endre den ved hover: en gradient som dreier fra 135 til 225 grader når pekeren kommer, er en diskret og gjennomarbeidet detalj for kort og [gradientkanter](https://gradiently.design/nb/guide/css-gradient-border).

Begge teknikkene så langt virker også på [gradienttekst](https://gradiently.design/nb/guide/css-gradient-text). Tekst klippet med `background-clip: text` viser det bakgrunnen gjør, så et sveip eller en stoppovergang på en overskrift får fargen til å renne gjennom bokstavene ved hover. Hold endringen forsiktig på overskrifter folk må lese, og sørg for at begge tilstandene har nok kontrast mot siden.

## Teknikk 3: krysston to gradienter

Legg hover-gradienten på et pseudoelement over grunnen og ton opasiteten. Endringer i opasitet håndteres av kompositoren uten ny maling, så dette er det jevneste valget for store kort, toppaneler og alt i et langt rutenett.

```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` sammen med `isolation: isolate` holder pseudoelementet bak teksten i flisen, men over grunngradienten.

## Teknikk 4: en glød som følger pekeren

En radiell gradient plassert med egendefinerte egenskaper kan følge pekeren. Sett `--x` og `--y` fra et lite skript, så beveger lyset seg med hånden. Hold den myk og hold den unna tekst: den skal føles som lys på en flate, aldri som en glorie rundt ord.

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

Gløden er et topplag over en mørk grunn. Å oppdatere to egendefinerte egenskaper er billig, men hver bevegelse maler på nytt, så bruk den på noen få paneler, ikke på hvert kort på siden.

## Slik velger du teknikk

| Teknikk | Ser ut som | Tegnekostnad | Best til |
| --- | --- | --- | --- |
| Skyv med background-position | Et sveip av ny farge | Ny maling under overgangen | Knapper, lenker, etiketter |
| Fargestopp med @property | Farger som skifter på stedet | Ny maling under overgangen | Kort, merker, kanter |
| Krysstoning med opasitet | Én gradient som løses opp i en annen | Komponert, ingen ny maling | Store paneler, lange rutenett |
| Glød som følger pekeren | Lys som følger pekeren | Ny maling ved hver bevegelse | Noen få fremhevede paneler |

Er du i tvil, velg krysstoning. Den er billigst og virker overalt.

For gradienter som beveger seg av seg selv i stedet for ved hover, se [animerte gradienter i CSS](https://gradiently.design/nb/guide/css-animated-gradient). For det store bildet av hva som koster tegnetid, se [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance).

## Berøringsskjermer og redusert bevegelse

### Unngå

- Hover-stiler som blir hengende etter et trykk på mobil
- Informasjon som bare vises ved hover
- Lange hover-animasjoner som går i loop
- Å overse innstillingen for redusert bevegelse

### Gjør

- Pakk hover-regler inn i `@media (hover: hover)`
- Vis samme tilstand på `:active` for berøring
- Hold overgangene mellom 200 og 500 ms
- Fjern bevegelse under `prefers-reduced-motion`, behold fargeskiftet

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

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

Fargen skifter fortsatt for alle; bare bevegelsen fjernes for dem som har bedt om mindre.

Hover-effekter gir liv til et nettsted. I innlegg i sosiale medier finnes det ingen peker, så bevegelsen må bo i selve designet. Marks fra Gradiently kan ha sin egen rolige bevegelse, og med Pro eksporteres et design som MP4, WebM eller GIF der nettleseren støtter opptak, klart for en story eller et innlegg.

## FAQ

### Kan man animere en CSS-gradient ved hover?

Ikke direkte. `background-image` endres umiddelbart. Animer `background-position` på en overdimensjonert gradient, animer registrerte stopp med `@property`, eller ton opasiteten til en ekstra gradient.

### Hvordan får jeg en gradientknapp til å skifte farge jevnt ved hover?

Bruk `background-size: 200% 100%` med en gradient med tre stopp, og animer så `background-position` fra `0% 50%` til `100% 50%` ved hover.

### Virker @property i alle nettlesere?

Det virker i dagens versjoner av Chrome, Edge, Safari og Firefox. Eldre nettlesere hopper mellom tilstandene i stedet for å gli.

### Hvilken hover-effekt med gradient gir best ytelse?

En krysstoning med opasitet: hover-gradienten ligger på et pseudoelement, og bare opasiteten endres, noe som unngår ny maling.

### Bør hover-effekter med gradient respektere redusert bevegelse?

Ja. Under `prefers-reduced-motion: reduce` fjerner du bevegelsen og beholder et enkelt fargeskifte.