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

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.

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

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.

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

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

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

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.

Begge teknikkene så langt virker også på gradienttekst. 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.

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

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.

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

Slik velger du teknikk

For gradienter som beveger seg av seg selv i stedet for ved hover, se animerte gradienter i CSS. For det store bildet av hva som koster tegnetid, se ytelse for CSS-gradienter.

Berøringsskjermer og redusert bevegelse

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

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

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.