# CSS gradient hover-effekt: fyra sätt att animera den

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

Skriv en ny gradient i :hover så hoppar den i stället för att mjukt övergå. Webbläsare kan inte tona en gradient till en annan, men de kan flytta en, tona en eller animera färgerna i den. Här är varje metod, med kod.

## The short version

- En CSS gradient hover-effekt kan inte göras genom att låta background-image övergå, eftersom webbläsare byter gradient direkt i stället för att interpolera dem.
- Den mest kompatibla tekniken är en överdimensionerad gradient med en transition på background-position, som glider in nya färger.
- Att registrera färgstopp eller vinklar med @property låter webbläsaren övergå mjukt mellan dem, och fungerar i alla aktuella stora webbläsare.
- Att tona opaciteten på en andra gradient i ett pseudoelement är den billigaste tekniken att rendera, eftersom opacitetsändringar inte målar om.
- Hover-effekter bör ligga inuti en hover-mediafråga och respektera prefers-reduced-motion.

En **CSS gradient hover-effekt** kräver en omväg, eftersom webbläsare inte låter `background-image` övergå: ändra gradienten i `:hover` så hoppar den. Fyra tekniker ger ett mjukt resultat. Glid en överdimensionerad gradient med `background-position`, animera registrerade färgstopp med `@property`, korstona en andra gradient på ett pseudoelement, eller flytta ett radiellt sken med markören. Var och en passar olika element, och alla finns nedan med kod.

## Varför transition inte fungerar på gradienter

För webbläsaren är en gradient en bild. Den kan interpolera ett tal eller en färg, men inte en bild till en annan, så `background-image` interpoleras inte och den nya gradienten ersätter den gamla direkt. Anpassade egenskaper som används i gradienten beter sig likadant om du inte registrerar dem, eftersom en oregistrerad egenskap bara är 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);
}
```

Transition-raden ignoreras för gradienter. Varje teknik nedan går runt det.

- Viloläge: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- Hover-läge: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

De två lägena som används i exemplen. Målet är en mjuk färd från den vänstra färgrutan till den högra.

## Teknik 1: glid en överdimensionerad gradient

Gör bakgrunden större än elementet och måla in båda lägena i den, och flytta den sedan. `background-position` kan övergå, så de nya färgerna glider in. Det fungerar i alla webbläsare och 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 vila ser du den vänstra halvan, indigo till violett. Vid hover glider den högra halvan, violett till rosa, på plats.

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

Det här är hela bakgrunden. Knappen visar bara hälften åt gången.

Rörelsen läses som en svepning, vilket passar knappar och länkar. Den är mindre övertygande på stora kort, där du ser gradienten färdas. Att animera `background-position` målar om, vilket är okej för små element; för en stor yta använder du teknik 3. [Gradientknappar i CSS](https://gradiently.design/sv/guide/css-gradient-button) har fler knappmönster byggda på detta.

## Teknik 2: animera färgstopp med @property

Registrera stoppfärgerna som typade anpassade egenskaper så kan webbläsaren interpolera dem. Gradienten byter då färg på plats, utan att glida. `@property` fungerar i alla aktuella stora webbläsare; äldre hoppar helt enkelt, vilket är en acceptabel reservlösning för en hover. Registreringsreglerna går vi igenom i [CSS @property](https://gradiently.design/sv/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;
}
```

Varje stopp mjukas av för sig. Ge dem olika längder så verkar färgen flöda från ett hörn till det andra.

Samma trick animerar vinkeln. Registrera `--angle` med `syntax: "<angle>"`, använd den i `linear-gradient(var(--angle), ...)` och ändra den vid hover: en gradient som vrids från 135 till 225 grader när pekaren kommer är en subtil, välgjord detalj för kort och [gradientramar](https://gradiently.design/sv/guide/css-gradient-border).

Båda teknikerna hittills fungerar också på [gradienttext](https://gradiently.design/sv/guide/css-gradient-text). Text som klipps med `background-clip: text` visar vad bakgrunden än gör, så en glidning eller en stopptransition på en rubrik får färgen att löpa genom bokstäverna vid hover. Håll ändringen lugn på rubriker som folk behöver läsa, och se till att båda lägena klarar kontrasten mot sidan.

## Teknik 3: korstona två gradienter

Lägg hover-gradienten på ett pseudoelement ovanför basen och tona dess opacitet. Opacitetsändringar hanteras av kompositören utan omritning, så detta är det mjukaste valet för stora kort, hjältepaneler och allt i ett långt rutnät.

```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` med `isolation: isolate` håller pseudoelementet bakom brickans text men ovanför dess basgradient.

## Teknik 4: ett sken som följer markören

En radiell gradient som positioneras med anpassade egenskaper kan följa pekaren. Sätt `--x` och `--y` från ett litet skript så rör sig ljuset med handen. Håll det mjukt och håll det borta från text: det ska kännas som ljus på en yta, aldrig en gloria kring 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`);
   });
*/
```

Skenet är ett översta lager över en mörk bas. Att uppdatera två anpassade egenskaper är billigt, men varje rörelse målar om, så använd det på några få paneler, inte på varje kort på en sida.

## Välj en teknik

| Teknik | Ser ut som | Renderingskostnad | Bäst för |
| --- | --- | --- | --- |
| Glid med background-position | En svepning av ny färg | Målar om under övergången | Knappar, länkar, taggar |
| @property-färgstopp | Färger som skiftar på plats | Målar om under övergången | Kort, märken, ramar |
| Opacitetskorstoning | En gradient som löses upp i en annan | Kompositerad, ingen omritning | Stora paneler, långa rutnät |
| Musglöd | Ljus som följer pekaren | Målar om vid varje rörelse | Några få funktionspaneler |

När du är osäker, korstona. Det är billigast och fungerar överallt.

För gradienter som rör sig av sig själva i stället för vid hover, se [animerade CSS-gradienter](https://gradiently.design/sv/guide/css-animated-gradient). För den större bilden av vad som kostar målningstid, se [CSS gradient prestanda](https://gradiently.design/sv/guide/css-gradient-performance).

## Pekskärmar och reducerad rörelse

### Undvik

- Hover-stilar som sitter kvar efter ett tryck på mobiler
- Information som bara visas vid hover
- Långa, loopande hover-animationer
- Att ignorera inställningen för reducerad rörelse

### Gör

- Linda in hover-regler i `@media (hover: hover)`
- Visa samma läge på `:active` för touch
- Håll övergångarna mellan 200 och 500 ms
- Ta bort rörelse under `prefers-reduced-motion`, behåll färgändringen

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

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

Färgen ändras fortfarande för alla; bara rörelsen tas bort för dem som bett om mindre.

Hover-effekter får en webbplats att leva. På sociala inlägg finns ingen pekare, så rörelsen måste ligga i själva designen. Gradiently-Marks kan bära sin egen milda rörelse, och med Pro exporteras en design som MP4, WebM eller GIF där webbläsaren stöder inspelning, redo för en story eller ett inlägg.

## FAQ

### Kan man låta en CSS-gradient övergå vid hover?

Inte direkt. `background-image` ändras omedelbart. Låt `background-position` övergå på en överdimensionerad gradient, animera registrerade stopp med `@property`, eller tona opaciteten på en andra gradient.

### Hur får jag en gradientknapp att byta färg mjukt vid hover?

Använd `background-size: 200% 100%` med en gradient på tre stopp, och låt sedan `background-position` övergå från `0% 50%` till `100% 50%` vid hover.

### Fungerar @property i alla webbläsare?

Det fungerar i aktuella versioner av Chrome, Edge, Safari och Firefox. Äldre webbläsare hoppar mellan lägena i stället för att mjukt övergå.

### Vilken gradient hover-effekt är mest prestandaeffektiv?

En opacitetskorstoning: hover-gradienten ligger på ett pseudoelement och bara dess opacitet ändras, vilket undviker omritning.

### Bör gradient hover-effekter respektera reducerad rörelse?

Ja. Under `prefers-reduced-motion: reduce` tar du bort rörelsen och behåller en enkel färgändring.