# Bakgrunn som tilpasses tekst: slik gir en Mark plass

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

De fleste bakgrunner er bilder, og bilder vet ikke hvor overskriften er. En Mark vet det og ordner seg på nytt for å slippe ordene gjennom fremfor å gjemme seg bak en boks.

## The short version

- En Mark fra Gradiently er en bakgrunn som tilpasses tekst, fordi den tegnes live og vet hvor ordene i designet står.
- Bak ordene flytter Marken sitt roligste område med best kontrast på plass, gjør fargene nær bokstavene dypere eller lysere og roer travle detaljer.
- Reaksjonen bruker verken bokser, skygger eller uskarphet, så bakgrunnen forblir hel og ordene kan fortsatt leses.
- Du velger styrken fra Av via Usynlig, Diskré og Tydelig til Kraftig, og finjusterer med Tone, Ro, Bøy og Rekkevidde.
- Fordi Marken tegnes på nytt i hver størrelse, gir den plass igjen der ordene havner i hvert format.

En Mark fra Gradiently er en **bakgrunn som tilpasses tekst**. Fordi den tegnes live fremfor å lagres som et bilde, vet den hvor ordene står og ordner seg rundt dem: materialets roligste del med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roes ned. Ingenting legges oppå. Ingen bokser, skygger eller uskarphet, så du beholder hele bakgrunnen og ordene kan fortsatt leses.

## Vanlige måter å gjøre tekst lesbar på, og hva de koster

Legg en overskrift på en livlig gradient eller et fotografi, så forsvinner deler av den. Standardløsningene dekker alle til bakgrunnen. Det er et merkelig resultat når bakgrunnen var grunnen til at du valgte designet.

### Dekker bakgrunnen

- En heldekkende eller frostet boks bak ordene
- En slagskygge på hver bokstav
- Uskarphet i området bak teksten
- Et mørkt overlegg over hele bildet

### En Mark gir plass

- Det rolige området flytter seg til ordene
- Fargene nær bokstavene blir dypere eller lysere
- Korn, rygger og lysglimt roer seg bak skriften
- Resten av bakgrunnen forblir like livlig

Hver løsning har sin plass på et flatt bilde, og [tekst på gradientbakgrunn](https://gradiently.design/nb/guide/text-on-gradient) dekker dem ærlig. Forskjellen med en Mark er at bakgrunnen deltar fremfor å maskeres.

## Hva en Mark gjør rundt ordene

1. **Den faller til ro** Materialet flytter seg så ordene havner på den roligste delen. Lys som ville ligget bak overskriften, driver til den åpne plassen rundt.
2. **Den endrer tone** Nær bokstavene glir paletten mot en farge som gir kontrast til skriften: dypere bak lys tekst, lysere bak mørk.
3. **Den roer seg** Forvrengning, uro og fine detaljer dempes bak ordene, så en sterk tekstur aldri kutter en tynn strek.
4. **Den bøyer seg rundt kantene** Mønstre bøyer seg litt langs ordenes kanter fremfor å gå rett gjennom dem.

En arrangementsplakat for sen museumsåpning der gradientens lyseste område ligger bak tittelen

Reaksjon av: materialet går rett gjennom ordene, akkurat som et flatt bilde.

Samme museumsplakat med gradienten samlet i en rolig, dypere tone bak tittelen og detaljene

Reaksjon på: samme Mark legger et dypere, roligere område bak skriften og beholder fargen ellers.

Reaksjonen virker sammen med [Auto-tekstfarge](https://gradiently.design/nb/guide/auto-ink-legibility), som velger Markens lyse eller mørke tekstfarge for hver linje. Bakgrunnen gir plass. Auto-tekstfarge velger riktig farge til plassen.

## Velg hvor sterkt bakgrunnen reagerer

Du bestemmer hvor mye Marken gir etter. Panelet heter Rundt ordene dine og starter med fem nivåer.

| Nivå | Hva det gjør | Passer til |
| --- | --- | --- |
| Av | Materialet ignorerer ordene | Bakgrunner og kunsttrykk uten tekst |
| Usynlig | Virker bare der det trengs, ingen merker det | Store, fete overskrifter på rolige Marks |
| Diskré | Balansert: uttrykket beholdes, ordene kan leses | De fleste sosiale innlegg og storyer |
| Tydelig | Ordene kommer alltid først | Menyer, prislister, arrangementsdetaljer |
| Kraftig | Maksimal kontrast med litt større rolig område | Liten skrift, lang tekst, skilt lest på avstand |

Fem utgangspunkter. Diskré er et fornuftig standardvalg. Gå opp når ordene blir mindre eller lengre.

Under nivåene er fire kontroller for finjustering: **Tone** bestemmer hvor mye materialet dempes bak ordene for kontrast. **Ro** bestemmer hvor mye forvrengning og uro dempes. **Bøy** bestemmer hvor mye mønsteret bøyes langs ordkantene. **Rekkevidde** bestemmer om det følger hver bokstav tett eller reagerer rundt hele tekstblokken.

> **Rekkevidde er kontrollen de fleste trenger** For en kort overskrift holder kort rekkevidde bakgrunnen livlig helt inntil bokstavene. For et avsnitt eller en liste roer større rekkevidde ett tydelig område for hele blokken, som er lettere å lese.

## Hvorfor det betyr noe i alle størrelser

Et flatt bakgrunnsbilde settes opp én gang. Beskjær det til story, og lysflekken kan havne rett bak overskriften. En Mark tegnes på nytt for hvert format. Når designet går fra innlegg til story til banner, flytter ordene seg også, og Marken gir plass igjen der de havner. Slik kan [ett uttrykk fungere i alle størrelser](https://gradiently.design/nb/guide/one-look-every-size).

- Innlegg 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-toppbilde 1500×500: 1500 × 500
- YouTube-miniatyrbilde 1280×720: 1280 × 720

Fire former, fire plasseringer for overskriften. Det rolige området følger ordene i hver.

## En enkel versjon av ideen i CSS

På nettet kan du låne prinsippet med en vanlig gradient: legg den dypeste, roligste delen der teksten står og hold fargen ved kantene. Den følger ikke ordene når oppsettet endres, men slår en boks.

Rolig, dypt område plassert bak teksten: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Tekstblokken ligger i den mørke plommeellipsen nederst til venstre. Fersken og rosa forblir livlige ved kantene.

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

Flytt ellipsen dit overskriften står. [Gradientoverlegg i CSS](https://gradiently.design/nb/guide/css-gradient-overlay) viser samme triks over et fotografi.

## Når du bør dempe reaksjonen

Ikke alle design trenger maksimal lesbarhet. En telefonbakgrunn har ingen ord, så Av er riktig. Store blikkfangsbokstaver, ett ord over en plakat, kan stå alene og ser ofte bedre ut med Usynlig. Bokstavbehandlinger som Kontur eller Uttrekk, dekket i [bokstaveffekter](https://gradiently.design/nb/guide/lettering-treatments), har allerede egen kontrast. Spar de sterke nivåene til oppgaver som trenger dem: liten skrift, lange detaljer og alt som leses raskt.

## FAQ

### Hvordan tilpasser en Mark fra Gradiently seg tekst?

Den flytter sitt roligste område med best kontrast bak ordene, gjør fargene nær bokstavene dypere eller lysere og demper travle detaljer, uten bokser, skygger eller uskarphet.

### Kan jeg stoppe bakgrunnen fra å reagere på teksten?

Ja. Sett reaksjonen til Av, så ignorerer materialet ordene. Det passer til bakgrunner og design uten tekst.

### Hvilket reaksjonsnivå bør jeg bruke?

Diskré passer de fleste innlegg og storyer. Bruk Tydelig eller Kraftig til liten skrift, lang tekst, menyer og alt som leses på avstand.

### Fungerer reaksjonen når jeg endrer størrelsen?

Ja. En Mark tegnes på nytt for hver størrelse og gir plass igjen der ordene havner i det nye formatet.