# Een achtergrond die zich aanpast aan tekst: zo maakt een Mark ruimte

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

De meeste achtergronden zijn plaatjes, en plaatjes weten niet waar je kop staat. Een Mark wel, dus hij herschikt zichzelf om de woorden door te laten in plaats van zich achter een vak te verschuilen.

## The short version

- Een Mark van Gradiently is een achtergrond die zich aanpast aan tekst, omdat hij live getekend wordt en weet waar de woorden in het ontwerp staan.
- Achter je woorden verplaatst een Mark zijn rustigste, best contrasterende gebied naar de juiste plek, verdiept of verlicht hij de kleuren bij de letters en laat hij drukke details tot rust komen.
- De reactie gebruikt geen vakken, schaduwen of vervaging, dus de achtergrond blijft heel en de woorden blijven leesbaar.
- Jij kiest hoe sterk een Mark reageert, van Uit via Onzichtbaar, Subtiel en Duidelijk tot Krachtig, en kunt het bijstellen met Toon, Rust, Buiging en Bereik.
- Omdat de Mark voor elk formaat opnieuw wordt getekend, maakt hij overal waar de woorden landen opnieuw ruimte.

Een Mark van Gradiently is een **achtergrond die zich aanpast aan tekst**. Omdat hij live wordt getekend in plaats van als plaatje opgeslagen, weet hij waar je woorden staan en herschikt hij zichzelf eromheen: het rustigste, best contrasterende deel van het materiaal schuift achter de tekst, kleuren bij de letters verdiepen of lichten op en drukke details komen tot rust. Er wordt niets overheen gelegd. Geen vakken, geen schaduwen en geen vervaging, dus je houdt de hele achtergrond en de woorden blijven leesbaar.

## De gebruikelijke manieren om tekst leesbaar te maken, en wat ze kosten

Zet een kop op een levendig kleurverloop of een foto en een deel ervan verdwijnt. De standaardoplossingen werken allemaal door de achtergrond af te dekken, een vreemde uitkomst als de achtergrond de reden was dat je dit ontwerp koos.

### De achtergrond afdekken

- Een egaal of mat vak achter de woorden
- Een slagschaduw op elke letter
- De plek achter de tekst vervagen
- Een donkere laag over het hele beeld

### Een Mark die ruimte maakt

- Zijn rustige gebied verplaatst zich naar waar de woorden staan
- Kleuren bij de letters verdiepen of lichten op
- Korrel, richels en flitsen komen tot rust achter letters
- De rest van de achtergrond blijft zo levendig als eerst

Elke oplossing heeft op een vlak beeld zijn plek, en [tekst op een kleurverloop als achtergrond](https://gradiently.design/nl/guide/text-on-gradient) behandelt ze eerlijk. Het verschil met een Mark is dat de achtergrond meedoet in plaats van afgedekt te worden.

## Wat een Mark rond je woorden doet

1. **Hij komt tot rust** Het materiaal verschuift zodat je woorden op zijn rustigste deel landen. Licht dat achter de kop zou zitten, drijft naar de open ruimte eromheen.
2. **Hij verandert van toon** Dicht bij de letters schuift het palet naar een kleur die contrasteert met de letters: dieper achter lichte inkt, lichter achter donkere inkt.
3. **Hij kalmeert** Vervorming, drukte en fijn detail komen tot rust achter de woorden, zodat een sterke textuur nooit door een dunne letterlijn snijdt.
4. **Hij buigt om de randen heen** Patronen buigen licht af aan de rand van de woorden in plaats van er recht doorheen te lopen.

Een evenementposter voor een late museumopening waarbij het helderste deel van het kleurverloop achter de titel zit

Reactie uit: het materiaal loopt dwars door de woorden, precies zoals een vlak beeld zou doen.

Dezelfde museumposter waarbij het kleurverloop achter de titel en details tot een rustige, diepere toon is gekomen

Reactie aan: dezelfde Mark legt een dieper, rustiger gebied achter de letters en houdt zijn kleur elders.

De reactie werkt hand in hand met [Auto-inkt](https://gradiently.design/nl/guide/auto-ink-legibility), dat per regel de lichte of donkere inkt van de Mark kiest. De achtergrond maakt de ruimte; Auto-inkt kiest de juiste kleur om hem te vullen.

## Kiezen hoe sterk de achtergrond reageert

Jij bepaalt hoeveel de Mark meegeeft. Het paneel daarvoor heet Rond je woorden en begint met vijf niveaus.

| Niveau | Wat het doet | Goed voor |
| --- | --- | --- |
| Uit | Het materiaal negeert je woorden | Achtergronden en kunstprints zonder tekst |
| Onzichtbaar | Werkt alleen waar het nodig is; niemand merkt het | Grote, vette koppen op rustige Marks |
| Subtiel | Evenwichtig: de look blijft, de woorden lezen | De meeste socialposts en stories |
| Duidelijk | Woorden winnen altijd | Menu’s, prijslijsten, evenementdetails |
| Krachtig | Het meeste contrast dat hij geeft, rust iets breder | Kleine letters, lange tekst, borden die van een afstand gelezen worden |

Vijf startpunten. Subtiel is een verstandige standaard; ga hoger zodra de woorden kleiner of langer worden.

Onder de niveaus zitten vier knoppen om bij te stellen: **Toon** bepaalt hoever het materiaal achter woorden tot contrast komt, **Rust** hoeveel vervorming en drukte kalmeren, **Buiging** hoeveel het patroon buigt aan de rand van de woorden en **Bereik** of het elke letter omarmt of rond het hele tekstblok reageert.

> **Bereik is de knop die de meeste mensen nodig hebben** Bij een korte kop houdt een klein bereik de achtergrond levendig tot vlak bij de letters. Bij een alinea of lijst kalmeert een groter bereik één duidelijk gebied voor het hele blok, wat makkelijker leest.

## Waarom het in elk formaat telt

Een vlakke achtergrondafbeelding wordt één keer opgemaakt. Snijd hem bij tot een story en de heldere plek kan precies achter de kop landen. Een Mark wordt voor elk formaat opnieuw getekend, dus als een ontwerp van post naar story naar banner gaat, verhuizen de woorden mee en maakt de Mark opnieuw ruimte waar ze ook landen. Daardoor werkt [één look in elk formaat](https://gradiently.design/nl/guide/one-look-every-size).

- Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-header 1500×500: 1500 × 500
- YouTube-thumbnail 1280×720: 1280 × 720

Vier vormen, vier verschillende plekken voor de kop. Het rustige gebied volgt de woorden in elk ervan.

## Een eenvoudige versie van het idee in CSS

Op het web kun je het principe lenen met een gewoon kleurverloop: zet het diepste, rustigste deel van de achtergrond waar je tekst staat en houd de kleur aan de randen. Het volgt de woorden niet als de layout verandert, maar het wint het van een vak.

Rustig, diep gebied achter de tekst geplaatst: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Het tekstblok zit in de donkere pruimkleurige ellips linksonder; perzik en roze blijven levendig naar de randen.

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

Verplaats de positie van de ellips naar waar je kop staat. [CSS-kleurverloop als overlay](https://gradiently.design/nl/guide/css-gradient-overlay) toont dezelfde truc bovenop een foto.

## Wanneer je de reactie lager zet

Niet elk ontwerp wil maximale leesbaarheid. Een telefoonachtergrond heeft helemaal geen woorden, dus Uit is goed. Enorme sierletters, één woord over een poster, kunnen op zichzelf staan en zien er vaak beter uit met Onzichtbaar. Letterbehandelingen zoals Contour of Extrusie, behandeld in [letterschrijfeffecten](https://gradiently.design/nl/guide/lettering-treatments), dragen hun eigen contrast al. Bewaar de sterke niveaus voor de klussen die ze nodig hebben: kleine letters, lange details en alles wat in haast gelezen wordt.

## FAQ

### Hoe past een Mark van Gradiently zich aan tekst aan?

Hij verplaatst zijn rustigste, best contrasterende gebied achter je woorden, verdiept of verlicht kleuren bij de letters en laat drukke details tot rust komen, zonder vakken, schaduwen of vervaging.

### Kan ik voorkomen dat de achtergrond op mijn tekst reageert?

Ja. Zet de reactie op Uit en het materiaal negeert je woorden, wat past bij achtergronden en ontwerpen zonder tekst.

### Welk reactieniveau moet ik gebruiken?

Subtiel past bij de meeste posts en stories. Gebruik Duidelijk of Krachtig voor kleine letters, lange tekst, menu’s en alles wat van een afstand gelezen wordt.

### Werkt de reactie als ik een ontwerp van formaat verander?

Ja. Een Mark wordt voor elk formaat opnieuw getekend, dus hij maakt opnieuw ruimte waar de woorden in het nieuwe formaat landen.