# Gradientöverlägg i CSS: tona och mörkna bilder på rätt sätt

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

Att lägga en gradient över ett foto kräver en extra rad CSS. Vilken av tre metoder du väljer avgör om bilden laddas snabbt, om överlägget kan animeras och om orden ovanpå förblir läsbara.

## The short version

- Det snabbaste gradientöverlägget i CSS är ett andra bakgrundslager: lista gradienten före url() i background-image så att den ligger överst.
- För ett img-element, lägg gradienten på ett ::before- eller ::after-pseudoelement på ett positionerat omslag.
- background-blend-mode och mix-blend-mode gör ett gradientöverlägg till en färggradient som tonar bilden i stället för att täcka den.
- Herobilder som anges som CSS-bakgrunder upptäcks senare än img-element, så en img med överlägg laddas oftast snabbare ovanför vecket.
- Överlägg som ska bära text ska vara mörkast bakom orden och genomskinliga annars, inte en jämn mörk hinna över hela fotot.

Det enklaste **gradientöverlägget i CSS** är en bakgrund i lager: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Lager som listas först ritas överst, så gradienten ligger över fotot. När bilden är ett `<img>`-element lägger du i stället gradienten på ett pseudoelement, och när du vill att färgen ska tona fotot snarare än täcka det lägger du till ett blandningsläge. Varje metod passar ett eget jobb.

## Metod 1: en bakgrund i lager

`background-image` accepterar en kommaseparerad lista. Det första värdet är det översta lagret. Gradienter och bilder blandas fritt, och varje lager kan ha egen storlek och position om du listar de egenskaperna i samma ordning. Det här är rätt val för dekorativa bilder där ingen alt-text behövs.

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

En mörk panel till vänster för texten, som klarnar vid 70 procent så att fotots högra del förblir ljus. Reservfärgen matchar överlägget, så texten läses redan innan bilden kommit.

- Sidopanel för text: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Övre och nedre fält: `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%)`
- Mjuk vinjett: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Diagonal varumärkesgradient: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`

Fyra överläggsförinställningar, visade här över sidan. Lägg valfri framför `url()` i din egen `background-image`.

De övre och nedre fälten passar gallerier där en titel sitter överst och en bildkredit nederst. Vinjetten drar blicken inåt utan att bära text. Varumärkesgradienten är en kraftfull look för teamsidor och eventbanners; [gradientöverlägg](https://gradiently.design/sv/guide/gradient-overlay) tar upp när var och en känns rätt ur ett designperspektiv.

## Metod 2: ett pseudoelement över en img

Innehållsbilder hör hemma i `<img>`-element: de får alt-text, responsiv `srcset`, lat laddning och tidig upptäckt av webbläsaren. En bakgrundsgradient kan inte ligga över en `<img>`, så linda in den och lägg gradienten på omslagets 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>
```

Ett riktigt bildelement med riktig alt-text. Bildtexten kommer att ligga på överlägget.

```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` håller överläggets staplingsordning inuti figuren. Överlägget kan tona vid hovring eftersom det är ett eget lager.

### Bakgrundslager

- Ett element, en deklaration
- Ingen alt-text, så bara dekorativa bilder
- Hittas sent av webbläsaren, vilket kan sakta ned en hero
- Överlägget kan inte tona utan att animera hela bakgrunden

### img plus pseudoelement

- Ett omslag och några rader till
- Riktig alt-text och responsiv `srcset`
- Upptäcks tidigt; `fetchpriority="high"` hjälper huvudbilden
- Överläggets opacitet kan övergå billigt

För en herobild som är det största på skärmen vinner den andra metoden oftast på laddningshastighet. [Optimera bilder för webben](https://gradiently.design/sv/guide/lighthouse-image-performance) förklarar varför webbläsaren hittar `<img>`-element tidigare än CSS-bakgrunder.

## Metod 3: blandningslägen för färgtoning

Ett vanligt överlägg ligger på fotot som tonat glas. Ett blandningsläge blandar in gradienten i fotots egna ljusa och mörka partier, vilket ser mer ut som om fotot tagits i den färgen. Använd `background-blend-mode` för bakgrunder i lager och `mix-blend-mode` på ett pseudoelement över en `<img>`.

| Blandningsläge | Vad det gör | Bra överlägg för |
| --- | --- | --- |
| `multiply` | Mörknar; vita ytor tar gradientens färg | Rika, dova toner på ljusa foton |
| `screen` | Ljusnar; svarta ytor tar färgen | Luftiga, bleka looks på mörka foton |
| `overlay` | Förstärker kontrasten och skjuter in färg i mellantonerna | Kraftfull varumärkesfärg på porträtt |
| `color` | Behåller fotots ljus, byter ut dess färg | Duoton-liknande gradienter från en gradient i två färger |
| `soft-light` | En mild version av overlay | Subtil värme eller svalka |

De fem lägen som är värda att kunna. `color` med en tvåfärgsgradient är den snabbaste duotonen på webben.

```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` blandar lagren i ett element. `mix-blend-mode` blandar ett element med det som ligger bakom det, här fotot.

Hela tekniken, inklusive hur du väljer de två färgerna, finns i [duotoneffekten](https://gradiently.design/sv/guide/duotone-effect).

## Överlägg som håller texten läsbar

Det vanligaste misstaget är en jämn mörk hinna över hela fotot, säg 50 procent svart. Den dämpar bilden överallt och är ändå kanske inte mörk nog bakom orden. Forma överlägget i stället: mörkast under texten, klart där fotot betyder något.

1. **Bestäm var orden hamnar** Nere till vänster för bildtexter, vänstra tredjedelen för herotext, mitten för en enda rad.
2. **Rikta gradienten mot dem** Använd `to top` för text nederst, `to right` för text till vänster eller en radiell centrerad på orden.
3. **Sluta tidigt** Tona till helt genomskinligt vid 60 till 70 procent så att det mesta av fotot förblir orört.
4. **Kontrollera värsta fallet** Mät kontrasten där fotot är ljusast bakom en bokstav. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) listar förhållandena.

Utjämnade gradienter med många stopp ser mjukare ut än en uttoning med två stopp; metoden finns i [transparenta gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-transparent).

## Överlägg utan gissningar

På en webbplats finjusterar du varje överlägg för hand. För sociala inlägg, banners och slides hoppar Gradiently över steget: en Mark vet var dina ord finns och fördjupar eller lyfter sina egna färger bakom dem, foton kan tonas i Markens färger som mono, duoton eller en gradient, och med Pro ändrar designen storlek till alla format i ett steg, utan något överlägg att göra om.

En bred eventbanner för Hamndagarna med en gradientbakgrund som fördjupas bakom titeln

En eventbanner i webbplatsens herostorlek, med bakgrunden som lugnar sig bakom orden i stället för ett handjusterat överlägg.

## FAQ

### Hur lägger jag en gradient över en bakgrundsbild i CSS?

Lista gradienten före bilden i `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Det första lagret ritas överst.

### Hur lägger jag till ett gradientöverlägg på ett img-element?

Linda in bilden i ett positionerat element och lägg gradienten på dess `::after`-pseudoelement med `position: absolute` och `inset: 0`.

### Vad är skillnaden mellan background-blend-mode och mix-blend-mode?

`background-blend-mode` blandar bakgrundslagren i ett element. `mix-blend-mode` blandar ett helt element med det som ligger bakom det.

### Hur mörkt ska ett bildöverlägg vara för text?

Mörkt nog för att texten klarar kontrastkontrollerna vid den ljusaste punkten bakom den. Forma gradienten så att den är mörkast där och klar annars.

### Kan jag animera ett gradientöverlägg vid hovring?

Ja. Lägg överlägget på ett pseudoelement och låt dess `opacity` övergå, vilket är billigare än att animera själva bakgrunden.