# Bakgrund som anpassar sig efter text: så gör en Mark plats

[Canonical HTML page](https://gradiently.design/sv/guide/text-reacts-to-background)

De flesta bakgrunder är bilder, och bilder vet inte var din rubrik sitter. En Mark vet det, så den ordnar om sig för att släppa fram orden i stället för att gömma sig bakom en ruta.

## The short version

- En Gradiently-Mark är en bakgrund som anpassar sig efter text, eftersom den ritas live och vet var orden i designen sitter.
- Bakom dina ord flyttar en Mark sin lugnaste, mest kontrastrika yta på plats, fördjupar eller ljusnar färgerna nära bokstäverna och dämpar stökiga detaljer.
- Reaktionen använder inga rutor, skuggor eller oskärpa, så bakgrunden förblir hel och orden går ändå att läsa.
- Du väljer hur kraftigt en Mark svarar, från Av via Osynlig, Diskret och Tydlig till Fet, och kan finjustera med Ton, Lugn, Böjning och Räckvidd.
- Eftersom Marken ritas på nytt för varje storlek gör den plats igen var orden än hamnar i varje format.

En Gradiently-Mark är en **bakgrund som anpassar sig efter text**. Eftersom den ritas live i stället för att sparas som en bild vet den var dina ord finns och ordnar om sig runt dem: materialets lugnaste, mest kontrastrika del flyttar sig bakom texten, färger nära bokstäverna fördjupas eller ljusnar och stökiga detaljer dämpas. Inget läggs ovanpå. Det finns inga rutor, inga skuggor och ingen oskärpa, så du behåller hela bakgrunden och orden går ändå att läsa.

## De vanliga sätten att göra text läsbar och vad de kostar

Lägg en rubrik på en livlig gradient eller ett foto och en del av den försvinner. De vanliga lösningarna fungerar alla genom att täcka över bakgrunden, vilket är ett märkligt resultat när bakgrunden var anledningen till att du valde designen.

### Att täcka över bakgrunden

- En massiv eller frostad ruta bakom orden
- En släpskugga på varje bokstav
- Oskärpa över ytan bakom texten
- Ett mörkt lager över hela bilden

### En Mark som gör plats

- Dess lugna yta flyttar dit orden är
- Färger nära bokstäverna fördjupas eller ljusnar
- Korn, åsar och flares dämpas bakom texten
- Resten av bakgrunden är lika levande som förut

Varje lösning har sin plats på en platt bild, och [text på en gradientbakgrund](https://gradiently.design/sv/guide/text-on-gradient) går igenom dem ärligt. Skillnaden med en Mark är att bakgrunden är med och spelar i stället för att maskeras.

## Vad en Mark gör runt dina ord

1. **Den lägger sig till rätta** Materialet förskjuts så att orden hamnar på dess lugnaste del. Ljus som annars hade legat bakom rubriken glider ut i det öppna utrymmet runt den.
2. **Den byter ton** Nära bokstäverna glider paletten mot en färg som kontrasterar mot texten: djupare bakom ljust bläck, ljusare bakom mörkt bläck.
3. **Den lugnar sig** Förvrängning, stök och fina detaljer dämpas bakom orden, så en kraftig struktur aldrig skär genom ett tunt streck.
4. **Den böjer sig runt kanterna** Mönster kröker sig lätt vid ordens kant i stället för att löpa rakt genom dem.

En eventaffisch för en sen kväll på museet där gradientens ljusaste yta ligger bakom titeln

Reaktionen av: materialet löper rakt genom orden, precis som en platt bild skulle göra.

Samma museiaffisch där gradienten har lagt sig i en lugn, djupare ton bakom titeln och detaljerna

Reaktionen på: samma Mark lägger en djupare, lugnare yta bakom texten och behåller sin färg på andra ställen.

Reaktionen arbetar hand i hand med [Auto-bläck](https://gradiently.design/sv/guide/auto-ink-legibility), som väljer Markens ljusa eller mörka bläck för varje rad. Bakgrunden gör plats; Auto-bläck väljer rätt färg att fylla den med.

## Välj hur kraftigt bakgrunden svarar

Du bestämmer hur mycket Marken viker undan. Panelen för det heter Kring dina ord, och den börjar med fem nivåer.

| Nivå | Vad den gör | Bra för |
| --- | --- | --- |
| Av | Materialet ignorerar dina ord | Bakgrundsbilder och konsttryck utan text |
| Osynlig | Verkar bara där det behövs; ingen märker det | Stora, kraftiga rubriker på lugna Marks |
| Diskret | Balanserad: looken bevaras, orden går att läsa | De flesta sociala inlägg och stories |
| Tydlig | Orden vinner alltid | Menyer, prislistor, eventdetaljer |
| Fet | Mest kontrast den kan ge, lugnet lite bredare | Liten text, långa texter, skyltar som läses från andra sidan rummet |

Fem utgångspunkter. Diskret är ett förnuftigt standardval; gå uppåt när orden blir mindre eller längre.

Under nivåerna finns fyra rattar för finjustering: **Ton** styr hur långt materialet lägger sig bakom orden för kontrastens skull, **Lugn** hur mycket förvrängning och stök som dämpas, **Böjning** hur mycket mönstret kröker sig vid ordens kant, och **Räckvidd** om det följer varje bokstav eller svarar runt hela textblocket.

> **Räckvidd är ratten de flesta behöver** För en kort rubrik håller en snäv räckvidd bakgrunden livlig ända fram till bokstäverna. För ett stycke eller en lista lugnar en bredare räckvidd en enda tydlig yta för hela blocket, vilket är lättare att läsa.

## Varför det spelar roll i varje storlek

En platt bakgrundsbild läggs ut en gång. Beskär den till en story och den ljusa fläcken kan hamna precis bakom rubriken. En Mark ritas på nytt för varje format, så när en design går från inlägg till story till banner flyttar sig orden och Marken gör plats igen var de än hamnar. Det är det som gör att [en look fungerar i alla storlekar](https://gradiently.design/sv/guide/one-look-every-size).

- Inlägg 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-header 1500×500: 1500 × 500
- YouTube-miniatyr 1280×720: 1280 × 720

Fyra former, fyra olika platser för rubriken. Den lugna ytan följer orden i varje.

## En enkel version av idén i CSS

På webben kan du låna principen med en vanlig gradient: lägg bakgrundens djupaste, lugnaste del där din text sitter och låt färgen ligga ute vid kanterna. Den följer inte orden när layouten ändras, men den slår en ruta.

Lugn, djup yta placerad bakom texten: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Textblocket ligger i den mörka plommonellipsen nere till vänster; persikan och rosen förblir levande mot kanterna.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Flytta ellipsens position dit din rubrik sitter. [CSS för gradientöverlägg](https://gradiently.design/sv/guide/css-gradient-overlay) visar samma knep ovanpå ett foto.

## När du ska sänka reaktionen

Alla designer vill inte ha maximal läsbarhet. En mobilbakgrund har inga ord alls, så Av är rätt. Stora displaybokstäver, ett enda ord över en affisch, klarar sig själva och ser ofta bättre ut med Osynlig. Bokstavsbehandlingar som Kontur eller Extrudering, som tas upp i [bokstavseffekter](https://gradiently.design/sv/guide/lettering-treatments), bär redan sin egen kontrast. Spara de starka nivåerna till jobb som kräver dem: finstilt, långa detaljer och allt som läses i all hast.

## FAQ

### Hur anpassar sig en Gradiently-Mark efter text?

Den flyttar sin lugnaste, mest kontrastrika yta bakom dina ord, fördjupar eller ljusnar färger nära bokstäverna och dämpar stökiga detaljer, helt utan rutor, skuggor eller oskärpa.

### Kan jag stoppa bakgrunden från att reagera på min text?

Ja. Ställ reaktionen på Av så ignorerar materialet dina ord, vilket passar bakgrundsbilder och designer utan text.

### Vilken reaktionsnivå ska jag använda?

Diskret passar de flesta inlägg och stories. Använd Tydlig eller Fet för liten text, långa texter, menyer och allt som läses på avstånd.

### Fungerar reaktionen när jag ändrar storlek på en design?

Ja. En Mark ritas på nytt för varje storlek, så den gör plats igen var orden än hamnar i det nya formatet.