# Gjennomsiktige gradienter i CSS: uttoning, overlegg og scrim

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

En gradient som tones ut til ingenting er et av de nyttigste verktøyene i CSS. Før etterlot den også en grå flekk på midten. Her ser du hvordan gjennomsiktighet i gradienter virker i dag, og hvilke mønstre som er verdt å ta vare på.

## The short version

- For å gjøre en CSS-gradient gjennomsiktig bruker du en farge med null alfa som ett av stoppene, for eksempel transparent eller rgb(124 58 237 / 0).
- Moderne nettlesere interpolerer gradientfarger med forhåndsmultiplisert alfa, så en farge som tones ut mot nøkkelordet transparent gir ikke lenger et grått bånd.
- En bakgrunnsgradient kan bare tone ut bakgrunnen; for å tone ut selve innholdet i et element bruker du mask-image med en gradient.
- En scrim med flere myke stopp ser jevnere ut enn en uttoning med to stopp, som viser en synlig kant der mørkningen slutter.
- En radiell gradient som er gjennomsiktig i midten og mørk utenfor, lager et spotlys som trekker blikket mot ett område.

For å gjøre en **CSS-gradient gjennomsiktig** gir du ett av stoppene en farge med null alfa: `linear-gradient(to bottom, #7c3aed, transparent)` toner fiolett ut til ingenting, så det som ligger under, skinner gjennom. Samme idé bruker du til uttoning på slutten av en tekst, mørke scrim bak bildetekster og fargede overlegg på bilder. Vil du tone ut innholdet i et element i stedet for bakgrunnen, bruker du `mask-image` med en gradient.

## Måter å skrive en gjennomsiktig farge på

| Du skriver | Betyr | Bruk det når |
| --- | --- | --- |
| `transparent` | Svart med null alfa | Du toner ut en hvilken som helst farge i moderne nettlesere |
| `rgb(124 58 237 / 0)` | Denne fiolette med null alfa | Du vil være eksplisitt eller støtte svært gamle nettlesere |
| `rgb(124 58 237 / 0.4)` | Denne fiolette på 40 prosent | Du vil ha et fargeskjær som aldri forsvinner helt |
| `#7c3aed66` | Åttesifret hex, omtrent 40 prosent | Designverktøyet eksporterer hex med alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | Fargen i en variabel på 40 prosent | Fargene ligger i egendefinerte egenskaper |

Fem måter å si omtrent det samme på. `color-mix()` er den eneste formen som virker på en farge du bare kjenner som en variabel; se [color-mix() i CSS](https://gradiently.design/nb/guide/css-color-mix).

## Hvorfor uttoninger pleide å bli grå

Nøkkelordet `transparent` er svart med null alfa. Tidlige nettlesere blandet rød, grønn og blå kanal hver for seg og alfakanalen for seg, så en uttoning fra hvit til `transparent` gikk innom halvgjennomsiktig grått på veien. Derfor insisterer eldre veiledninger på `rgba(255, 255, 255, 0)` i stedet.

Spesifikasjonen krever nå forhåndsmultiplisert alfa: hver farge vektes etter opasiteten sin før blandingen, så et helt gjennomsiktig stopp bidrar ikke med farge i det hele tatt. Alle dagens nettlesere gjør dette. Å skrive samme farge med null alfa er likevel en harmløs vane, og den holder deg trygg i e-postklienter og gamle WebViews.

### Gammel oppførsel

- Hvit til `transparent` går innom grått
- Fargekanalene blandes uten hensyn til opasitet
- Løsning: gjenta fargen med null alfa

### Dagens nettlesere

- Hvit til `transparent` forblir hvit mens den tones ut
- Forhåndsmultiplisert alfa, slik spesifikasjonen krever
- Begge former virker; den eksplisitte er mer portabel

- Fiolett som tones ut: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Blågrønn borte ved 70 prosent: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Oransje glød på ingenting: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Tre uttoninger vist over sidens egen bakgrunn, som er nøyaktig det de gjør i oppsettet ditt. Legg slike uttoninger over en grunnfarge for å bygge myke bakgrunner i lag.

Hvor uttoningen slutter, betyr like mye som fargene. Et stopp på 70 prosent avslutter uttoningen tidlig og lar resten av boksen være helt klar, som er ideelt for et fargeskjær som bare skal berøre én kant. To stopp på samme posisjon gir et skarpt kutt fra farge til ingenting, nyttig for halvfulle linjer og delte bakgrunner. Stopposisjoner forklares i [lineære gradienter i CSS](https://gradiently.design/nb/guide/css-linear-gradient).

## Tone ut innhold med mask-image

En bakgrunnsgradient ligger bak innholdet, så den kan ikke tone ut tekst, bilder eller en rullende liste. Det kan en maske. Med `mask-image` holder de ugjennomsiktige delene av gradienten elementet synlig, mens de gjennomsiktige delene skjuler det. Fargen på masken spiller ingen rolle, bare alfaen.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Masker toner ut det som ligger der, på enhver sidefarge, lys eller mørk. `mask-image` uten prefiks virker i dagens nettlesere; legg til `-webkit-mask-image` for eldre Safari.

Det gamle alternativet var en hvit gradient lagt over innholdet. Den ryker i det øyeblikket siden ikke er hvit, for eksempel i [mørk modus](https://gradiently.design/nb/guide/dark-mode-design), og den blokkerer klikk med mindre du husker `pointer-events: none`. En maske har ingen av disse problemene.

## Scrim: gjennomsiktige gradienter for tekst

En scrim gjør en del av et bilde mørkere så teksten på det blir lesbar, og toner ut til helt gjennomsiktig så resten av bildet forblir lyst. En uttoning med to stopp fungerer, men den rette rampen etterlater en synlig linje der mørkningen slutter. Flere stopp, fordelt så de myknes ut, skjuler den kanten.

Myk scrim, sju stopp: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

Opasiteten faller raskt nær teksten og sakte mot toppen, og det oppleves som naturlig skygge i stedet for et bånd.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

Scrimen er det første bakgrunnslaget, så den ligger oppå bildet.

Farg scrimen med en dyp versjon av bildets egen farge i stedet for rent svart, så føles den som en del av bildet. På et varmt solnedgangsbilde synker en dyp brun som `rgb(41 20 8 / 0.75)` inn i bildet, der svart ville sett ut som et filter lagt oppå. [Gradientoverlegg i CSS](https://gradiently.design/nb/guide/css-gradient-overlay) handler om fargeskjær og blandingsmoduser, og [tekst over bilder](https://gradiently.design/nb/guide/text-over-image) handler om plassering.

## Gjennomsiktige hull og spotlys

Snu ideen: gjennomsiktig i midten, mørkt utenfor. En [radiell gradient](https://gradiently.design/nb/guide/css-radial-gradient) lagt over en side eller et bilde lar ett område være opplyst og demper stille alt annet, som passer til introduksjonstips, produktnærbilder og presentasjoner.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Sett `--x` og `--y` fra JavaScript for å flytte spotlyset. Overgangen på 80 piksler mellom stoppene holder kanten myk.

Et stående produktinnlegg der overskriften ligger over et lyst område i gradienten

Uten noen form for tilpasning konkurrerer ordene med den lyseste delen av bakgrunnen.

Det samme produktinnlegget med et roligere, dypere område i gradienten bak overskriften

Bakgrunnen roer seg ned bak ordene, den jobben en scrim gjør på et nettsted.

Til innlegg i sosiale medier og trykk trenger du sjelden å bygge scrim for hånd. I Gradiently lager Marken selv plass til ordene dine ved å gjøre fargene dypere eller lysere nær bokstavene, uten noe overleggslag du må justere for hver størrelse.

## FAQ

### Hvordan får jeg en CSS-gradient til å tones ut til gjennomsiktig?

Bruk en farge med null alfa som siste stopp: `linear-gradient(#7c3aed, transparent)` eller, for å være eksplisitt, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Hvorfor ser gradienten min mot transparent grå ut?

Eldre nettlesere blander uten forhåndsmultiplisert alfa, så `transparent` (gjennomsiktig svart) gjør midten grå. Ton heller ut til din egen farge med null alfa.

### Hvordan toner jeg ut tekst eller et bilde med CSS?

Bruk `mask-image` med en gradient, for eksempel `mask-image: linear-gradient(#000 60%, transparent)`. Elementet tones ut på enhver bakgrunnsfarge.

### Hva er en scrim i CSS?

En gradient som gjør en del av et bilde mørkere bak tekst og tones ut til gjennomsiktig ellers, så teksten blir lesbar og bildet forblir lyst.

### Kan en CSS-gradient ha et gjennomsiktig hull?

Ja. En radiell gradient som er gjennomsiktig i midten og mørk lenger ut, gir et klart spotlys over det som ligger under.