# Gradient overlays: farv fotos uden at skjule dem

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

Et godt overlay ændrer stemningen i et foto og giver dine ord et sted at stå, mens billedet stadig skinner igennem. Et dårligt et gør hvert billede til det samme grumsede rektangel. Her er, hvordan du kender forskel.

## The short version

- Et gradient overlay er et lag farve, der toner hen over et foto, brugt til at farve billedet, sætte en stemning eller skabe et roligere område til tekst.
- Det mest almindelige overlay er en scrim: gennemsigtig i den ene kant og mørk i den anden, så kun den del af fotoet, der ligger bag ordene, bliver mørkere.
- Et farvevask-overlay bruger brandfarver med delvis opacitet, ofte med en blandingstilstand som multiply, screen eller color, så fotoet bevarer sine detaljer.
- Overlays virker bedst, når de kun dækker det område, der har brug for hjælp, i stedet for at dæmpe hele billedet jævnt.
- Skal en scrim over cirka 80 procent opacitet i sin mørkeste kant, før teksten kan læses, så vælg et roligere foto, eller flyt ordene.

Et **gradient overlay** er et lag farve, der toner hen over et foto, lagt ovenpå for at farve det, samle et sæt billeder eller gøre en overskrift læselig. Tricket er, at det toner: én del af fotoet påvirkes kraftigt, resten næsten ikke. Derfor ser et gradient overlay gennemtænkt ud, hvor en flad sort boks på 50 procent ligner en nødløsning. Du vælger, hvor farven lander, hvor kraftig den bliver, og hvordan den blander sig med billedet nedenunder.

## Fire slags gradient overlays

Næsten hvert overlay, du ser på et website, en plakat eller et opslag, er én af fire typer. At vide, hvilken du har brug for, sparer en masse pillen ved opacitetsskydere.

| Overlay | Hvad det gør | Brug det til |
| --- | --- | --- |
| Scrim | Gennemsigtig til mørk hen over én kant | Overskrifter og billedtekster på travle fotos |
| Farvevask | Brandfarver med delvis styrke over hele billedet | At få uensartede fotos til at føles som ét sæt |
| Duotone eller gradient map | Erstatter fotoets farver med to eller flere af dine | Stærke, grafiske udtryk; se [duotone-effekten](https://gradiently.design/da/guide/duotone-effect) |
| Vignet | Gør hjørnerne mørkere med en radial overgang | At trække øjet mod midten |

De fire familier af overlays. De fleste designs har kun brug for én af dem, ikke alle fire.

## Scrimmen: et overlay til tekst

En scrim er arbejdshesten. Den starter helt gennemsigtig og bliver mørkere mod den kant, hvor dine ord står, som regel bunden eller venstre side. Fotoet forbliver urørt, hvor motivet er, og teksten får et roligt, mørkt gulv. Brug en mørk tone fra selve fotoet frem for ren sort: en dyb brun over et varmt interiør, en marineblå over et havlandskab. Ren sort ligner en plet.

- Scrim forneden, marineblå: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Scrim til venstre, varm brun: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vignet: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Tre overlays alene, før der kommer et foto nedenunder. Hver holder sig klar, hvor motivet ville være.

De øverste 40 procent af scrimmen forneden er helt klare, hvilket holder ansigter og produkter lyse. Mørket bygger op gennem den nederste halvdel og topper helt ude i kanten, præcis hvor en billedtekst står. Flere måder at holde ord læselige på billeder finder du i [læselig tekst på fotos](https://gradiently.design/da/guide/readable-text-on-photos).

## Farvevask-overlays og blandingstilstande

En farvevask er måden, brands får stockfotos, mobilbilleder og eventbilleder til at ligne én familie. Læg en gradient af to brandfarver over fotoet, og skift dens blandingstilstand. Blandingstilstanden afgør, hvordan farven blander sig med billedet, og den betyder mere end farverne.

| Blandingstilstand | Effekt på fotoet | God sammen med |
| --- | --- | --- |
| Normal | Dækker fotoet med den opacitet, du sætter | Scrims bag tekst |
| Multiply | Gør mørkere og farver; hvidt tager overlayets farve | Lyse, luftige fotos |
| Screen | Gør lysere og farver; sort tager overlayets farve | Mørke, stemningsfulde fotos |
| Color | Bevarer fotoets lys og skygge, bytter dets farvetoner | En stærk enkelt brandfarvetone |
| Soft light | Blid kontrast og farvning | Diskrete vask på portrætter |

Blandingstilstande har de samme navne i CSS, Figma, Photoshop og de fleste designværktøjer.

Vask fra violet til koral: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

En farvevask i tre farver med faldende opacitet. Sat til multiply over et blegt foto læses den som en varm, violet skumring; sat til screen over et mørkt gløder den.

## Sådan lægger du et gradient overlay på et foto

1. **Bestem, hvad overlayet skal bruges til** Tekst, stemning eller ensartethed. En scrim til tekst, en vask til stemning og ensartethed. Kan du ikke sige hvilken, har du sandsynligvis ikke brug for et.
2. **Tag en mørk tone fra fotoet** Vælg den dybeste farve, der allerede er i billedet, til en scrim, eller to brandfarver til en vask.
3. **Tegn gradienten over det område, der har brug for den** Start klart over motivet, og byg op mod kanten med ordene. Hold overgangen lang, så der ikke er nogen synlig linje.
4. **Vælg en blandingstilstand** Normal til scrims, multiply til lyse fotos, screen til mørke, color til en enkelt farvetone.
5. **Sænk opaciteten, til den næsten forsvinder** Skub den så ét trin op igen. De bedste overlays bliver først bemærket, når du slår dem fra.
6. **Tjek teksten i telefonstørrelse** Formindsk designet til den størrelse, det vil blive set i, og læs hvert ord. Kontrast, der virker på en skærm, kan svigte på en telefon; [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) har de mål, du skal sigte efter.

## Hvor mørkt et gradient overlay skal være

### Skjuler fotoet

- Et fladt sort lag på 50 procent over det hele
- Det samme overlay på hvert billede, uanset lyset
- Ren sort eller grå, der gør hud og mad mat
- En skarp kant, hvor gradienten stopper
- Et overlay så kraftigt, at fotoet kunne være hvad som helst

### Farver fotoet

- Klart over motivet, kun mørkere bag ord
- Styrken justeret pr. foto
- En mørk tone taget fra billedet eller brandet
- En lang, gradvis overgang uden linje
- Fotoet kan stadig genkendes med et blik

Som en praktisk grænse: skal den mørkeste kant af en scrim over cirka 80 procent, før teksten kan læses, er fotoet for travlt på det sted. Flyt ordene, beskær anderledes, eller vælg et roligere billede. En vask over hele billedet kræver langt mindre, ellers holder fotoet op med at ligne et foto.

## Gradient overlays på et website

På nettet kan du stable overlayet og fotoet i én deklaration, som holder dem sammen, når billedet skifter. Overlayet kommer først, fordi CSS maler det første lag øverst. Hele sættet af teknikker, herunder blandingstilstande og pseudoelementer, står i [gradient overlay i CSS](https://gradiently.design/da/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

En scrim forneden over et herofoto. Skift billedet, og overlayet bliver.

## En vask, der matcher dit brand hver gang

Overlays glider, når hver designer vælger sine egne farver. I Studio i Gradiently kan fotos farves i din Marks egne farver som mono, duotone eller en vask, så billeder fra forskellige kilder deler én palet uden manuel afstemning. Og når ord står på en Mark i stedet for et foto, gør den selv området bag dem roligere, helt uden overlay. Læs [duotonefotos i din Marks farver](https://gradiently.design/da/guide/photo-duotone-in-mark-colours) for at se, hvordan vasken virker.

Et boligopslag, hvor overskriften Netop sat til salg står på den travleste del af baggrunden

Uden hjælp løber den travleste farve lige gennem overskriften.

Det samme boligopslag med et roligere, dybere område bag overskriften, så hver linje kan læses

Når Marken reagerer, falder området bag ordene til ro, det job en scrim normalt gør.

## FAQ

### Hvad er et gradient overlay?

Et lag farve, der toner hen over et billede, lagt ovenpå for at farve det, sætte en stemning eller gøre tekst lettere at læse. Det adskiller sig fra et fladt overlay, fordi dets styrke ændrer sig hen over billedet.

### Hvilken opacitet skal et overlay på et foto have?

Brug så lidt, som gør teksten læselig: ofte 50 til 80 procent i den mørkeste kant af en scrim og meget mindre til en vask over hele fotoet. Har du brug for mere, er fotoet sandsynligvis for travlt på det sted.

### Hvilken blandingstilstand er bedst til et farveoverlay?

Multiply passer til lyse fotos, screen til mørke, og color bytter fotoets farvetoner, mens lys og skygge bevares. Brug normal til scrims bag tekst.

### Skal jeg bruge sort til et gradient overlay?

Som regel ikke. En dyb tone taget fra fotoet, som en mørk marineblå eller brun, gør billedet mørkere uden at få det til at se mat ud.

### Hvordan tilføjer jeg et gradient overlay i CSS?

Skriv gradienten først og billedet bagefter i `background-image`, for eksempel `linear-gradient(...), url(photo.jpg)`. Det første lag bliver malet øverst.