# Gennemsigtige gradienter i CSS: fades, overlays og scrims

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

En gradient, der toner ud til ingenting, er et af de mest nyttige værktøjer i CSS. Den plejede også at efterlade en grå plet i midten. Her er, hvordan gennemsigtighed i gradienter virker nu, og de mønstre, der er værd at beholde.

## The short version

- For at gøre en CSS-gradient gennemsigtig bruger du en farve med nul alfa som ét af farvestoppene, for eksempel transparent eller rgb(124 58 237 / 0).
- Moderne browsere interpolerer gradientfarver med præmultipliceret alfa, så en tone fra en farve til nøgleordet transparent giver ikke længere et gråt bånd.
- En baggrundsgradient kan kun tone baggrunden ud; for at tone et elements faktiske indhold ud bruger du mask-image med en gradient.
- En scrim med flere bløde stop ser jævnere ud end en fade med to stop, som viser en synlig kant, hvor mørkningen holder op.
- En radial gradient, der er gennemsigtig i midten og mørk udenfor, laver et spotlight, som drager opmærksomheden mod ét område.

For at gøre en **CSS-gradient gennemsigtig** giver du ét af farvestoppene en farve med nul alfa: `linear-gradient(to bottom, #7c3aed, transparent)` toner violet ud til ingenting, så det, der ligger nedenunder, skinner igennem. Brug samme idé til fades for enden af tekst, mørke scrims bag billedtekster og farvede overlays på fotos. Skal du tone et elements indhold ud i stedet for dets baggrund, bruger du `mask-image` med en gradient.

## Måder at skrive en gennemsigtig farve på

| Du skriver | Betyder | Brug den, når |
| --- | --- | --- |
| `transparent` | Sort med nul alfa | Du toner en hvilken som helst farve ud i moderne browsere |
| `rgb(124 58 237 / 0)` | Denne violet med nul alfa | Du vil være eksplicit eller understøtte meget gamle browsere |
| `rgb(124 58 237 / 0.4)` | Denne violet ved 40 procent | En tone, der aldrig helt forsvinder |
| `#7c3aed66` | Hex med otte cifre, cirka 40 procent | Designværktøjer, der eksporterer hex med alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | En variabels farve ved 40 procent | Farver gemt i brugerdefinerede egenskaber |

Fem måder at sige samme slags ting på. Kun `color-mix()` virker på en farve, du kun kender som variabel; se [color-mix() i CSS](https://gradiently.design/da/guide/css-color-mix).

## Hvorfor fades plejede at blive grå

Nøgleordet `transparent` er sort med nul alfa. Tidlige browsere blandede rød, grøn og blå kanal og alfakanalen hver for sig, så en fade fra hvid til `transparent` passerede halvgennemsigtig grå på vejen. Det er derfor, ældre tutorials insisterer på `rgba(255, 255, 255, 0)` i stedet.

Specifikationen kræver nu præmultipliceret alfa: hver farve vægtes efter sin dækkende evne, før den blandes, så et helt gennemsigtigt stop slet ikke bidrager med farve. Alle nuværende browsere gør det. At skrive den matchende farve med nul alfa er stadig en harmløs vane, og den holder dig på den sikre side i mailklienter og gamle WebViews.

### Gammel opførsel

- Hvid til `transparent` dypper omkring grå
- Farvekanaler blandet uden hensyn til dækkevne
- Løsning: gentag farven med nul alfa

### Nuværende browsere

- Hvid til `transparent` forbliver hvid, mens den toner ud
- Præmultipliceret alfa, som specifikationen kræver
- Begge former virker; den eksplicitte er mere portabel

- Violet, der toner ud: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Blågrøn, der er tonet ud ved 70 procent: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Orange glød på ingenting: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Tre fades vist over denne sides egen baggrund, som er præcis det, de gør i dit layout. Stabl fades som disse oven på en basisfarve for at bygge bløde, lagdelte baggrunde.

Hvor fadet slutter, betyder lige så meget som farverne. Et stop ved 70 procent afslutter fadet tidligt og lader resten af boksen stå helt klar, hvilket er ideelt til en tone, der kun skal røre én kant. To stop på samme position giver et hårdt skift fra farve til ingenting, nyttigt til halvfyldte bjælker og delte baggrunde. Stoppositioner er forklaret i [CSS linear gradienter](https://gradiently.design/da/guide/css-linear-gradient).

## Fade indhold ud med mask-image

En baggrundsgradient ligger bag indholdet, så den kan ikke tone tekst, billeder eller en rullende liste ud. En maske kan. Med `mask-image` holder gradientens dækkende dele elementet synligt, mens de gennemsigtige dele skjuler det. Maskens farve er ligegyldig, kun dens alfa tæller.

```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 alt ud, hvad end der er dér, på enhver sidefarve, lys eller mørk. `mask-image` uden præfiks virker i nuværende browsere; tilføj `-webkit-mask-image` til ældre Safari.

Det gamle alternativ var en hvid gradient lagt over indholdet. Den går i stykker, så snart siden ikke er hvid, for eksempel i [mørk tilstand](https://gradiently.design/da/guide/dark-mode-design), og den blokerer klik, medmindre du husker `pointer-events: none`. En maske har ingen af de problemer.

## Scrims: gennemsigtige gradienter til tekst

En scrim mørkner en del af et billede, så teksten på det kan læses, og toner ud til fuldt gennemsigtig, så resten af fotoet forbliver lyst. En fade med to stop virker, men dens lige rampe efterlader en synlig streg, hvor mørkningen ender. Flere stop, fordelt så de glider blødt ud, skjuler kanten.

Blød scrim, syv stop: `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%)`

Dækningen falder hurtigt nær teksten og langsomt nær toppen, hvilket læses 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;
}
```

Scrimmen er det første baggrundslag, så den ligger oven på fotoet.

Tone scrimmen med en dyb version af fotoets farve frem for ren sort, så føles den som en del af billedet. På et varmt solnedgangsfoto synker en dyb brun som `rgb(41 20 8 / 0.75)` ind i billedet, hvor sort ville ligne et filter lagt oveni. [Gradient-overlays i CSS](https://gradiently.design/da/guide/css-gradient-overlay) dækker farvelag og blandingstilstande, og [tekst over billeder](https://gradiently.design/da/guide/text-over-image) dækker placering.

## Gennemsigtige huller og spotlights

Vend idéen om: gennemsigtig i midten, mørk udenfor. En [radial gradient](https://gradiently.design/da/guide/css-radial-gradient) lagt over en side eller et billede efterlader ét område oplyst og dæmper stille alt andet, hvilket passer til onboarding-tips, nærbilleder af produkter og slides.

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

Sæt `--x` og `--y` fra JavaScript for at flytte spotlightet. Overgangen på 80 pixel mellem stoppene holder kanten blød.

Et produktopslag i højformat, hvor overskriften ligger over et lyst område af gradienten

Uden nogen form for formgivning konkurrerer ordene med baggrundens lyseste del.

Det samme produktopslag med et roligere, dybere område af gradienten bag overskriften

Baggrunden dæmper sig selv bag ordene, det samme job en scrim gør på et website.

Til opslag på sociale medier og print har du sjældent brug for at bygge scrims i hånden. I Gradiently gør selve Marken plads til dine ord og uddyber eller løfter farverne nær bogstaverne, uden et overlaylag, du skal finjustere for hver størrelse.

## FAQ

### Hvordan får jeg en CSS-gradient til at tone ud til transparent?

Brug en farve med nul alfa som sidste stop: `linear-gradient(#7c3aed, transparent)` eller, for at være eksplicit, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Hvorfor ser min gradient til transparent grå ud?

Ældre browsere blander uden præmultipliceret alfa, så `transparent` (gennemsigtig sort) gør midten grå. Tone i stedet ud til din farve med nul alfa.

### Hvordan toner jeg tekst eller et billede ud med CSS?

Brug `mask-image` med en gradient, for eksempel `mask-image: linear-gradient(#000 60%, transparent)`. Elementet toner ud på enhver baggrundsfarve.

### Hvad er en scrim i CSS?

En gradient, der mørkner en del af et billede bag tekst og toner ud til gennemsigtig andre steder, så teksten kan læses, og billedet forbliver lyst.

### Kan en CSS-gradient have et gennemsigtigt hul?

Ja. En radial gradient, der er gennemsigtig i midten og mørk længere ude, efterlader et klart spotlight over det, der ligger nedenunder.