# Gradientoverlegg i CSS: ton og mørkne bilder riktig

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

En gradient over et bilde tar én ekstra CSS-linje. Valget mellom tre metoder avgjør om bildet lastes raskt, om overlegget kan animeres, og om ordene over forblir lesbare.

## The short version

- Det raskeste gradientoverlegget i CSS er et ekstra bakgrunnslag: list gradienten før url() i background-image, så ligger den øverst.
- For et img-element legger du gradienten på et ::before- eller ::after-pseudoelement i en posisjonert omsluttende beholder.
- background-blend-mode og mix-blend-mode gjør et gradientoverlegg til en fargetoning som farger bildet fremfor å dekke det.
- Toppbilder satt som CSS-bakgrunner oppdages senere enn img-elementer, så img med overlegg lastes vanligvis raskere øverst på siden.
- Overlegg som skal bære tekst, bør være mørkest bak ordene og gjennomsiktige ellers, fremfor en jevn mørk hinne over hele bildet.

Det enkleste **gradientoverlegget i CSS** er en lagdelt bakgrunn: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Lag som står først, tegnes øverst, så gradienten ligger over bildet. Når bildet er et `<img>`-element, legger du gradienten på et pseudoelement i stedet. Når du vil tone bildet fremfor å dekke det, legger du til en blandingsmodus. Hver metode passer sin oppgave.

## Metode 1: lagdelt bakgrunn

`background-image` tar en kommaseparert liste. Første verdi er øverste lag. Gradienter og bilder kan blandes fritt, og hvert lag kan ha egen størrelse og posisjon hvis egenskapene listes i samme rekkefølge. Dette er riktig valg for dekorative bilder som ikke trenger alternativtekst.

```css
.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

Et mørkt felt til venstre for teksten, gjennomsiktig ved 70 prosent så høyre side forblir lys. Reservefargen passer overlegget, så teksten er lesbar før bildet kommer.

- Sidefelt til tekst: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Felt øverst og nederst: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Myk vignett: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Diagonal merkevaretoning: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`

Fire overleggsoppskrifter vist over siden. Legg hvilken som helst foran `url()` i din egen `background-image`.

Feltene øverst og nederst passer gallerier med tittel øverst og kreditering nederst. Vignetten trekker blikket innover uten å bære tekst. Merkevaretoningen gir et tydelig uttrykk til teamsider og arrangementsbannere. [Gradientoverlegg](https://gradiently.design/nb/guide/gradient-overlay) viser når hver variant passer fra et designperspektiv.

## Metode 2: pseudoelement over img

Innholdsbilder hører hjemme i `<img>`-elementer: de får alternativtekst, responsiv `srcset`, utsatt lasting og tidlig oppdagelse av nettleseren. En bakgrunnsgradient kan ikke ligge over en `<img>`, så legg bildet i en beholder og gradienten på beholderens pseudoelement.

```html
<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>
```

Et ekte bildeelement med ekte alternativtekst. Bildeteksten skal ligge på overlegget.

```css
.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }
```

`isolation: isolate` holder overleggets lagdeling inni figuren. Overlegget kan tones ved pekerberøring fordi det er et eget lag.

### Bakgrunnslag

- Ett element, én deklarasjon
- Ingen alternativtekst, derfor bare dekorative bilder
- Oppdages sent av nettleseren, som kan forsinke toppbildet
- Overlegget kan ikke tones uten å animere hele bakgrunnen

### img med pseudoelement

- En beholder og noen ekstra linjer
- Ordentlig alternativtekst og responsiv `srcset`
- Oppdages tidlig. `fetchpriority="high"` hjelper hovedbildet
- Overleggets opasitet kan animeres med liten kostnad

For et toppbilde som er det største på skjermen, vinner vanligvis den andre metoden på lastehastighet. [Optimalisering av nettbilder](https://gradiently.design/nb/guide/lighthouse-image-performance) forklarer hvorfor nettleseren finner `<img>`-elementer før CSS-bakgrunner.

## Metode 3: blandingsmoduser for fargetoning

Et vanlig overlegg ligger på bildet som tonet glass. En blandingsmodus blander gradienten inn i bildets eget lys og mørke, så det ser mer ut som bildet ble tatt i den fargen. Bruk `background-blend-mode` til lagdelte bakgrunner og `mix-blend-mode` på et pseudoelement over en `<img>`.

| Blandingsmodus | Hva den gjør | Passer som overlegg til |
| --- | --- | --- |
| `multiply` | Mørkner. Hvite områder tar gradientens farge | Fyldige, stemningsfulle toner på lyse bilder |
| `screen` | Lysner. Svarte områder tar fargen | Luftige, falmede uttrykk på mørke bilder |
| `overlay` | Øker kontrasten og legger farge i mellomtonene | Sterk merkevarefarge på portretter |
| `color` | Beholder bildets lys, erstatter fargen | Duotonelignende toning med tofarget gradient |
| `soft-light` | En mild versjon av overlay | Diskret varme eller kjølighet |

De fem modusene det er verdt å kjenne. `color` med en tofarget gradient er den raskeste duotonen på nett.

```css
/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}
```

`background-blend-mode` blander lagene i ett element. `mix-blend-mode` blander et element med det som ligger bak, her bildet.

Hele teknikken, inkludert valg av de to fargene, finnes i [duotoneeffekten](https://gradiently.design/nb/guide/duotone-effect).

## Overlegg som holder tekst lesbar

Den vanligste feilen er en jevn mørk hinne over hele bildet, for eksempel 50 prosent svart. Den demper bildet overalt og er kanskje fortsatt ikke mørk nok bak ordene. Form heller overlegget: mørkest under teksten, klart der bildet er viktig.

1. **Bestem hvor ordene skal stå** Nederst til venstre for bildetekster, venstre tredel for toppfelttekst, midten for én linje.
2. **Rett gradienten mot dem** Bruk `to top` for tekst nederst, `to right` for tekst til venstre, eller en radialgradient sentrert på ordene.
3. **Stopp tidlig** Ton ut til helt gjennomsiktig ved 60 til 70 prosent, så det meste av bildet forblir urørt.
4. **Kontroller det vanskeligste tilfellet** Mål kontrast der bildet er lysest bak en bokstav. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) lister forholdene.

Mykt formede overlegg med mange stopp ser jevnere ut enn en uttoning med to stopp. Metoden finnes i [gjennomsiktige gradienter i CSS](https://gradiently.design/nb/guide/css-gradient-transparent).

## Overlegg uten gjetting

På en nettside tilpasser du hvert overlegg for hånd. Til sosiale innlegg, bannere og lysbilder hopper Gradiently over dette steget: en Mark vet hvor ordene dine er og gjør egne farger dypere eller lysere bak dem. Bilder kan tones i Markens farger som mono, duotone eller lavering. Med Pro endres designet til alle formater i ett steg, uten noe overlegg å bearbeide.

Et bredt arrangementsbanner for Harbour Days med gradientbakgrunn som blir dypere bak tittelen

Et arrangementsbanner i nettsidens toppfeltstørrelse, med bakgrunn som roer seg bak ordene fremfor et håndjustert overlegg.

## FAQ

### Hvordan legger jeg en gradient over et bakgrunnsbilde i CSS?

List gradienten før bildet i `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Første lag tegnes øverst.

### Hvordan legger jeg et gradientoverlegg på et img-element?

Legg bildet i et posisjonert element og gradienten på dets `::after`-pseudoelement med `position: absolute` og `inset: 0`.

### Hva er forskjellen på background-blend-mode og mix-blend-mode?

`background-blend-mode` blander bakgrunnslagene i ett element. `mix-blend-mode` blander hele elementet med det som ligger bak.

### Hvor mørkt bør et bildeoverlegg være for tekst?

Mørkt nok til at teksten består kontrastkontrollen på det lyseste punktet bak. Form gradienten så den er mørkest der og klar ellers.

### Kan jeg animere et gradientoverlegg ved pekerberøring?

Ja. Legg overlegget på et pseudoelement og animer `opacity`. Det er billigere enn å animere selve bakgrunnen.