# CSS gradient hover-effekt: fire måder at animere den på

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

Skriv en ny gradient i :hover, og den springer i stedet for at glide. Browsere kan ikke lave en overgang fra én gradient til en anden, men de kan flytte en, tone en ud eller animere farverne i den. Her er hver metode med koden.

## The short version

- En CSS gradient hover-effekt kan ikke laves med en transition på background-image, fordi browsere bytter gradienter øjeblikkeligt i stedet for at interpolere dem.
- Den mest kompatible teknik er en overdimensioneret gradient med en transition på background-position, som glider nye farver ind i billedet.
- Når du registrerer farvestop eller vinkler med @property, kan browseren lave en jævn overgang, og det virker i alle nuværende store browsere.
- At tone opaciteten af en ekstra gradient på et pseudo-element ind og ud er den billigste teknik at rendere, fordi ændringer i opacitet ikke gentegner.
- Hover-effekter hører hjemme i en hover media query og skal respektere prefers-reduced-motion.

En **CSS gradient hover-effekt** kræver en omvej, for browsere laver ikke overgange på `background-image`: ændrer du gradienten i `:hover`, springer den. Fire teknikker giver et jævnt resultat. Lad en overdimensioneret gradient glide med `background-position`, animer registrerede farvestop med `@property`, krydsfade en ekstra gradient på et pseudo-element, eller flyt en radial glød med markøren. Hver passer til forskellige elementer, og alle er herunder med kode.

## Hvorfor transition ikke virker på gradienter

For browseren er en gradient et billede. Den ved, hvordan man interpolerer et tal eller en farve, men ikke ét billede til et andet, så `background-image` interpoleres ikke, og den nye gradient erstatter den gamle med det samme. Brugerdefinerede egenskaber inde i gradienten opfører sig på samme måde, medmindre du registrerer dem, for en uregistreret egenskab er bare 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 teknik herunder går uden om det.

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

De to tilstande, der bruges i eksemplerne. Målet er en jævn rejse fra den venstre farveprøve til den højre.

## Teknik 1: lad en overdimensioneret gradient glide

Gør baggrunden større end elementet, mal begge tilstande ind i den, og flyt den så. `background-position` kan have en overgang, så de nye farver glider ind. Det virker i alle browsere og kræver 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 den venstre halvdel, indigo til violet. Ved hover glider den højre halvdel, violet til pink, på plads.

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

Det er hele baggrunden. Knappen viser kun halvdelen ad gangen.

Bevægelsen læses som et strøg, som passer til knapper og links. Den er mindre overbevisende på store kort, hvor man kan se gradienten rejse. Animation af `background-position` gentegner, hvilket er fint for små elementer; til en stor flade bruger du teknik 3. [Gradientknapper i CSS](https://gradiently.design/da/guide/css-gradient-button) har flere knapmønstre bygget på dette.

## Teknik 2: animer farvestop med @property

Registrer stopfarverne som typede brugerdefinerede egenskaber, så kan browseren interpolere dem. Gradienten skifter så farve på stedet, uden at glide. `@property` virker i alle nuværende store browsere; ældre springer simpelthen, hvilket er en acceptabel nødløsning til en hover. Registreringsreglerne er beskrevet i [CSS @property](https://gradiently.design/da/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 stop glider for sig. Giv dem forskellige varigheder, og farven ser ud til at flyde fra det ene hjørne til det andet.

Samme trick animerer vinklen. Registrer `--angle` med `syntax: "<angle>"`, brug den i `linear-gradient(var(--angle), ...)` og ændr den ved hover: en gradient, der drejer fra 135 til 225 grader, når markøren ankommer, er et diskret, poleret strejf på kort og [gradientkanter](https://gradiently.design/da/guide/css-gradient-border).

Begge teknikker indtil nu virker også på [gradienttekst](https://gradiently.design/da/guide/css-gradient-text). Tekst klippet med `background-clip: text` viser, hvad baggrunden gør, så et glid eller en stop-overgang på en overskrift får farven til at løbe gennem bogstaverne ved hover. Hold ændringen blid på overskrifter, folk skal kunne læse, og sørg for, at begge tilstande har kontrast mod siden.

## Teknik 3: krydsfade to gradienter

Læg hover-gradienten på et pseudo-element over basen og tone dets opacitet ind. Ændringer i opacitet håndteres af compositoren uden at gentegne, så det er det jævneste valg til store kort, hero-paneler og alt i et langt gitter.

```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 pseudo-elementet bag flisens tekst, men over dens basisgradient.

## Teknik 4: en glød, der følger markøren

En radial gradient placeret med brugerdefinerede egenskaber kan følge markøren. Sæt `--x` og `--y` fra et lille script, så følger lyset hånden. Hold den blød og væk fra tekst: det skal føles som lys på en overflade, aldrig som en glorie omkring 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 øverste lag over en mørk base. At opdatere to brugerdefinerede egenskaber er billigt, men hver bevægelse gentegner, så brug den på nogle få paneler, ikke på hvert kort på en side.

## Sådan vælger du teknik

| Teknik | Ser ud som | Renderingsomkostning | Bedst til |
| --- | --- | --- | --- |
| Glid med background-position | Et strøg af ny farve | Gentegner under overgangen | Knapper, links, tags |
| @property-farvestop | Farver, der skifter på stedet | Gentegner under overgangen | Kort, badges, kanter |
| Krydsfade med opacitet | Én gradient, der opløses i en anden | Composited, ingen gentegning | Store paneler, lange gitre |
| Cursor-glød | Lys, der følger markøren | Gentegner ved hver bevægelse | Nogle få fremhævede paneler |

Er du i tvivl, så brug krydsfade. Det er den billigste og virker overalt.

Til gradienter, der bevæger sig af sig selv i stedet for ved hover, se [animerede CSS-gradienter](https://gradiently.design/da/guide/css-animated-gradient). For det større billede af, hvad der koster tegnetid, se [CSS gradient-ydeevne](https://gradiently.design/da/guide/css-gradient-performance).

## Touchskærme og reduceret bevægelse

### Undgå

- Hover-stilarter, der hænger fast efter et tryk på mobilen
- Information, der kun dukker op ved hover
- Lange hover-animationer i loop
- At ignorere indstillingen for reduceret bevægelse

### Gør

- Pak hover-regler ind i `@media (hover: hover)`
- Vis samme tilstand på `:active` til touch
- Hold overgange mellem 200 og 500 ms
- Fjern bevægelse under `prefers-reduced-motion`, behold farveskiftet

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

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

Farven skifter stadig for alle; kun bevægelsen fjernes for dem, der har bedt om mindre.

Hover-effekter giver liv til et website. På opslag på sociale medier er der ingen markør, så bevægelsen må ligge i selve designet. Gradiently-Marks kan bære deres egen blide bevægelse, og med Pro eksporteres et design som MP4, WebM eller GIF, hvor browseren understøtter optagelse, klar til en story eller et opslag.

## FAQ

### Kan man lave en overgang på en CSS-gradient ved hover?

Ikke direkte. `background-image` skifter øjeblikkeligt. Brug en transition på `background-position` på en overdimensioneret gradient, animer registrerede stop med `@property`, eller tone opaciteten af en ekstra gradient.

### Hvordan får jeg en gradientknap til at skifte farve jævnt ved hover?

Brug `background-size: 200% 100%` med en gradient med tre stop, og lav så en transition på `background-position` fra `0% 50%` til `100% 50%` ved hover.

### Virker @property i alle browsere?

Det virker i nuværende versioner af Chrome, Edge, Safari og Firefox. Ældre browsere springer mellem tilstandene i stedet for at glide.

### Hvad er den mest effektive gradient hover-effekt?

En krydsfade med opacitet: hover-gradienten ligger på et pseudo-element, og kun dets opacitet ændres, hvilket undgår gentegning.

### Skal gradient hover-effekter respektere reduceret bevægelse?

Ja. Under `prefers-reduced-motion: reduce` fjerner du bevægelsen og beholder et enkelt farveskifte.