# Gradienttäckning: tona foton utan att dölja dem

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

En bra täckning ändrar fotots stämning och ger dina ord något att stå på, medan bilden fortfarande skiner igenom. En dålig gör varje bild till samma grumliga rektangel. Så skiljer du dem åt.

## The short version

- En gradienttäckning är ett färglager som tonar ut över ett foto och används för att tona bilden, sätta en stämning eller skapa ett lugnare område för text.
- Den vanligaste täckningen är en mörkläggning: genomskinlig vid ena kanten och mörk vid den andra, så att bara den del av fotot som ligger bakom orden mörkas.
- En färgtoning använder varumärkesfärger i delvis opacitet, ofta med ett blandningsläge som multiply, screen eller color, så att fotot behåller sina detaljer.
- Täckningar fungerar bäst när de bara täcker det område som behöver hjälp, i stället för att dämpa hela bilden jämnt.
- Om en mörkläggning måste passera ungefär 80 procents opacitet vid den mörkaste kanten innan texten går att läsa, välj ett lugnare foto eller flytta orden.

En **gradienttäckning** är ett färglager som tonar ut över ett foto, lagt ovanpå för att tona det, ge en uppsättning bilder en enhetlig look eller göra en rubrik läsbar. Knepet är att den tonar ut: en del av fotot berörs kraftigt, resten knappt alls. Därför ser en gradienttäckning genomtänkt ut medan en platt svart ruta på 50 procent ser ut som en nödlösning. Du väljer var färgen landar, hur stark den blir och hur den blandas med bilden under.

## Fyra sorters gradienttäckning

Nästan varje täckning du ser på en webbplats, affisch eller ett inlägg är en av fyra typer. Att veta vilken du behöver sparar mycket pillande med opacitetsreglage.

| Täckning | Vad den gör | Använd den till |
| --- | --- | --- |
| Mörkläggning | Genomskinlig till mörk över en kant | Rubriker och bildtexter på stökiga foton |
| Färgtoning | Varumärkesfärger i delvis styrka över hela bilden | Att få orelaterade foton att kännas som en serie |
| Duoton eller gradientkarta | Ersätter fotots färger med två eller fler av dina | Starka, grafiska looks, se [duotoneffekten](https://gradiently.design/sv/guide/duotone-effect) |
| Vinjettering | Mörkar hörnen med en radiell tonavklingning | Att dra blicken mot mitten |

De fyra täckningsfamiljerna. De flesta designer behöver bara en av dem, inte alla fyra.

## Mörkläggningen: en täckning för text

En mörkläggning är arbetshästen. Den börjar helt genomskinlig och mörknar mot den kant där dina ord sitter, oftast nederkanten eller vänster. Fotot förblir orört där motivet är, och texten får ett lugnt, mörkt golv. Använd en mörk ton från själva fotot i stället för rent svart: en djup brun över en varm interiör, en marinblå över ett havsmotiv. Rent svart ser ut som en fläck.

- Mörkläggning nedtill, marinblå: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Mörkläggning till vänster, varmbrun: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vinjettering: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Tre täckningar för sig, innan något foto läggs under. Var och en förblir klar där motivet skulle vara.

De översta 40 procenten av mörkläggningen nedtill är helt klara, vilket håller ansikten och produkter ljusa. Mörkret byggs upp genom nedre halvan och når sin topp vid själva kanten, precis där en bildtext sitter. För fler sätt att hålla ord läsbara på bilder, läs [läsbar text på foton](https://gradiently.design/sv/guide/readable-text-on-photos).

## Färgtoningar och blandningslägen

En färggradient är hur varumärken får stockfoton, mobilbilder och eventbilder att se ut som en familj. Lägg en gradient av två varumärkesfärger över fotot och ändra dess blandningsläge. Blandningsläget avgör hur färgen blandas med bilden, och det spelar större roll än färgerna.

| Blandningsläge | Effekt på fotot | Passar med |
| --- | --- | --- |
| Normal | Täcker fotot med den opacitet du ställer in | Mörkläggningar bakom text |
| Multiply | Mörkar och tonar, vitt tar täckningens färg | Ljusa, luftiga foton |
| Screen | Ljusar och tonar, svart tar täckningens färg | Mörka, stämningsfulla foton |
| Color | Behåller fotots ljus och skugga men byter dess nyanser | En stark enfärgad varumärkeston |
| Soft light | Försiktig kontrast och tonning | Subtila gradienter på porträtt |

Blandningslägena har samma namn i CSS, Figma, Photoshop och de flesta designverktyg.

Gradient från violett till korall: `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 trefärgsgradient med fallande opacitet. Satt på multiply över ett blekt foto läses den som en varm violett skymning, och satt på screen över ett mörkt foto glöder den.

## Så lägger du en gradienttäckning på ett foto

1. **Bestäm vad täckningen är till för** Text, stämning eller enhetlighet. En mörkläggning för text, en gradient för stämning och enhetlighet. Om du inte kan säga vilket behöver du förmodligen ingen.
2. **Plocka en mörk ton ur fotot** Välj den djupaste färgen som redan finns i bilden för en mörkläggning, eller två varumärkesfärger för en gradient.
3. **Rita gradienten över det område som behöver den** Börja klar över motivet och bygg upp mot den kant där orden är. Håll tonavklingningen lång så att ingen linje syns.
4. **Välj ett blandningsläge** Normal för mörkläggningar, multiply för ljusa foton, screen för mörka och color för en enda ton.
5. **Sänk opaciteten tills den nästan försvinner** Höj den sedan ett steg igen. De bästa täckningarna märks bara när du stänger av dem.
6. **Kontrollera texten i mobilstorlek** Krymp designen till den storlek den ses i och läs varje ord. Kontrast som fungerar på en bildskärm kan fallera på en mobil, och [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) har målen att sikta mot.

## Hur mörk en gradienttäckning ska vara

### Döljer fotot

- Ett platt svart lager på 50 procent över allt
- Samma täckning på varje bild, oavsett ljus
- Rent svart eller grått som dämpar hud och mat
- En hård kant där gradienten slutar
- En täckning så stark att fotot kunde vara vad som helst

### Tonar fotot

- Klar över motivet, mörkare bara bakom orden
- Styrkan justerad för varje foto
- En mörk ton hämtad från bilden eller varumärket
- En lång, gradvis tonavklingning utan linje
- Fotot går fortfarande att känna igen med en blick

Som arbetsgräns gäller: om den mörkaste kanten på en mörkläggning måste passera ungefär 80 procent innan texten går att läsa är fotot för stökigt för den platsen. Flytta orden, beskär annorlunda eller välj en lugnare bild. En gradient över hela bilden behöver mycket mindre, annars slutar fotot se ut som ett foto.

## Gradienttäckningar på en webbplats

På webben kan du lägga täckningen och fotot i en enda deklaration, vilket håller ihop dem när bilden byts. Täckningen kommer först eftersom CSS målar det första lagret överst. Hela uppsättningen tekniker, inklusive blandningslägen och pseudoelement, finns i [CSS för gradienttäckning](https://gradiently.design/sv/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 mörkläggning nedtill över ett hero-foto. Byt bild så ligger täckningen kvar.

## En gradient som matchar ditt varumärke varje gång

Täckningar glider isär när varje formgivare väljer sina egna färger. I Gradiently Studio kan foton tonas i din Marks egna färger som mono, duoton eller gradient, så att bilder från olika källor delar en palett utan att du matchar för hand. Och när orden sitter på en Mark i stället för ett foto lugnar den området bakom dem av sig själv, helt utan täckning. Läs [duotonfoton i din Marks färger](https://gradiently.design/sv/guide/photo-duotone-in-mark-colours) för hur gradienten fungerar.

Ett bostadsinlägg där rubriken Nu till salu sitter på den mest stökiga delen av bakgrunden

Utan hjälp löper den mest stökiga färgen rakt genom rubriken.

Samma bostadsinlägg med ett lugnare, djupare område bakom rubriken så att varje rad går att läsa

När Marken reagerar lugnas området bakom orden, det jobb en mörkläggning vanligtvis gör.

## FAQ

### Vad är en gradienttäckning?

Ett färglager som tonar ut över en bild, lagt ovanpå för att tona den, sätta en stämning eller göra text lättare att läsa. Den skiljer sig från en platt täckning genom att dess styrka ändras över bilden.

### Vilken opacitet ska en fototäckning ha?

Använd så lite som gör texten läsbar: ofta 50 till 80 procent vid den mörkaste kanten på en mörkläggning, och mycket mindre för en gradient över hela fotot. Om du behöver mer är fotot förmodligen för stökigt för den platsen.

### Vilket blandningsläge är bäst för en färgtäckning?

Multiply passar ljusa foton, screen passar mörka, och color byter fotots nyanser men behåller dess ljus och skugga. Använd normal för mörkläggningar bakom text.

### Ska jag använda svart för en gradienttäckning?

Oftast inte. En djup ton hämtad från fotot, som en mörk marinblå eller brun, mörkar bilden utan att den ser trist ut.

### Hur lägger jag en gradienttäckning i CSS?

Lista gradienten först och bilden sedan i `background-image`, till exempel `linear-gradient(...), url(photo.jpg)`. Det första lagret målas överst.