# Ein Hintergrund, der sich dem Text anpasst: wie ein Mark Platz macht

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

Die meisten Hintergründe sind Bilder, und Bilder wissen nicht, wo deine Überschrift steht. Ein Mark weiß es und ordnet sich neu, um die Worte durchzulassen, statt sich hinter einem Kasten zu verstecken.

## The short version

- Ein Gradiently Mark ist ein Hintergrund, der sich dem Text anpasst, weil er live gezeichnet wird und weiß, wo die Worte im Design stehen.
- Hinter deinen Worten schiebt ein Mark seinen ruhigsten, kontrastreichsten Bereich an die richtige Stelle, vertieft oder hellt die Farben nahe den Buchstaben auf und beruhigt unruhige Details.
- Die Reaktion kommt ohne Kästen, Schatten oder Unschärfe aus, sodass der Hintergrund ganz bleibt und die Worte trotzdem lesbar sind.
- Du wählst, wie stark ein Mark reagiert, von Aus über Unsichtbar, Dezent und Klar bis Kräftig, und kannst mit Ton, Ruhe, Biegung und Reichweite fein abstimmen.
- Weil der Mark für jede Größe neu gezeichnet wird, macht er in jedem Format wieder dort Platz, wo die Worte landen.

Ein Gradiently Mark ist ein **Hintergrund, der sich dem Text anpasst**. Weil er live gezeichnet und nicht als Bild gespeichert wird, weiß er, wo deine Worte stehen, und ordnet sich um sie herum neu: Der ruhigste, kontrastreichste Teil des Materials wandert hinter den Text, Farben nahe den Buchstaben vertiefen sich oder hellen auf, und unruhige Details beruhigen sich. Nichts wird darübergelegt. Es gibt keine Kästen, keine Schatten und keine Unschärfe, du behältst also den ganzen Hintergrund, und die Worte bleiben lesbar.

## Die üblichen Wege, Text lesbar zu machen, und was sie kosten

Setz eine Überschrift auf einen lebhaften Verlauf oder ein Foto, und ein Teil davon verschwindet. Die gängigen Lösungen funktionieren alle, indem sie den Hintergrund verdecken, ein seltsames Ergebnis, wenn der Hintergrund der Grund war, das Design zu wählen.

### Den Hintergrund verdecken

- Ein deckender oder milchiger Kasten hinter den Worten
- Ein Schlagschatten auf jedem Buchstaben
- Den Bereich hinter dem Text weichzeichnen
- Eine dunkle Ebene über dem ganzen Bild

### Ein Mark, der Platz macht

- Sein ruhiger Bereich wandert dorthin, wo die Worte stehen
- Farben nahe den Buchstaben vertiefen sich oder hellen auf
- Körnung, Grate und Lichtreflexe beruhigen sich hinter der Schrift
- Der Rest des Hintergrunds bleibt so lebendig wie vorher

Jede dieser Lösungen hat bei einem flachen Bild ihren Platz, und [Text auf einem Verlaufshintergrund](https://gradiently.design/de/guide/text-on-gradient) behandelt sie ehrlich. Der Unterschied bei einem Mark: Der Hintergrund macht mit, statt abgedeckt zu werden.

## Was ein Mark um deine Worte herum macht

1. **Er kommt zur Ruhe** Das Material verschiebt sich, sodass deine Worte auf seinem ruhigsten Teil landen. Licht, das hinter der Überschrift gelegen hätte, wandert in den freien Raum drumherum.
2. **Er ändert den Ton** Nah an den Buchstaben gleitet die Palette zu einer Farbe, die mit der Schrift kontrastiert: tiefer hinter heller Schrift, heller hinter dunkler.
3. **Er beruhigt sich** Verzerrung, Unruhe und feine Details entspannen sich hinter den Worten, sodass eine starke Textur nie durch einen dünnen Strich schneidet.
4. **Er biegt sich an den Rändern** Muster krümmen sich am Rand der Worte leicht, statt gerade durch sie hindurchzulaufen.

Ein Eventplakat für eine lange Museumsnacht, bei dem der hellste Bereich des Verlaufs hinter dem Titel liegt

Reaktion aus: Das Material läuft gerade durch die Worte, genau wie bei einem flachen Bild.

Dasselbe Museumsplakat, bei dem sich der Verlauf hinter Titel und Details in einen ruhigen, tieferen Ton gelegt hat

Reaktion an: Derselbe Mark legt einen tieferen, ruhigeren Bereich hinter die Schrift und behält seine Farbe anderswo.

Die Reaktion arbeitet Hand in Hand mit der [Automatische Farbe](https://gradiently.design/de/guide/auto-ink-legibility), die für jede Zeile die helle oder dunkle Schriftfarbe des Marks wählt. Der Hintergrund macht den Platz; die Automatische Farbe wählt die richtige Farbe, um ihn zu füllen.

## Wählen, wie stark der Hintergrund reagiert

Du entscheidest, wie weit der Mark nachgibt. Das Panel dafür heißt Um deine Wörter, und es beginnt mit fünf Stufen.

| Stufe | Was sie macht | Gut für |
| --- | --- | --- |
| Aus | Das Material ignoriert deine Worte | Hintergrundbilder und Kunstdrucke ohne Text |
| Unsichtbar | Wirkt nur, wo nötig; niemandem fällt es auf | Große, kräftige Überschriften auf ruhigen Marks |
| Dezent | Ausgewogen: Der Look bleibt, die Worte sind lesbar | Die meisten Social Posts und Stories |
| Klar | Worte gewinnen immer | Speisekarten, Preislisten, Eventdetails |
| Kräftig | Der stärkste Kontrast, die Ruhe etwas breiter | Kleine Schrift, lange Texte, Schilder, die man quer durch den Raum liest |

Fünf Ausgangspunkte. Dezent ist ein vernünftiger Standard; geh höher, sobald die Worte kleiner oder länger werden.

Unter den Stufen liegen vier Regler zur Feinabstimmung: **Ton** bestimmt, wie weit sich das Material für Kontrast hinter den Worten zurückzieht, **Ruhe**, wie stark sich Verzerrung und Unruhe entspannen, **Biegung**, wie sehr sich das Muster am Rand der Worte krümmt, und **Reichweite**, ob es sich eng an jeden Buchstaben schmiegt oder um den ganzen Textblock reagiert.

> **Reichweite ist der Regler, den die meisten brauchen** Bei einer kurzen Überschrift hält eine enge Reichweite den Hintergrund bis an die Buchstaben lebendig. Bei einem Absatz oder einer Liste beruhigt eine weitere Reichweite eine klare Fläche für den ganzen Block, das liest sich leichter.

## Warum das in jeder Größe zählt

Ein flaches Hintergrundbild wird einmal angeordnet. Schneidest du es auf eine Story zu, landet der helle Fleck vielleicht genau hinter der Überschrift. Ein Mark wird für jedes Format neu gezeichnet: Wenn ein Design vom Post zur Story zum Banner wandert, wandern die Worte mit, und der Mark macht wieder dort Platz, wo sie landen. Das ist es, was [einen Look in jeder Größe funktionieren lässt](https://gradiently.design/de/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 Formen, vier verschiedene Plätze für die Überschrift. Der ruhige Bereich folgt in jeder den Worten.

## Eine einfache Version der Idee in CSS

Im Web kannst du das Prinzip mit einem schlichten Verlauf übernehmen: Leg den tiefsten, ruhigsten Teil des Hintergrunds dorthin, wo dein Text sitzt, und halte die Farbe an den Rändern. Er folgt den Worten nicht, wenn sich das Layout ändert, schlägt aber einen Kasten.

Ruhiger, tiefer Bereich hinter dem Text: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Der Textblock sitzt in der dunklen pflaumenfarbenen Ellipse unten links; Pfirsich und Rosé bleiben zu den Rändern hin lebendig.

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

Verschieb die Position der Ellipse dorthin, wo deine Überschrift sitzt. [Verlaufs-Overlay in CSS](https://gradiently.design/de/guide/css-gradient-overlay) zeigt denselben Trick über einem Foto.

## Wann du die Reaktion herunterdrehst

Nicht jedes Design will maximale Lesbarkeit. Ein Handy-Hintergrundbild hat gar keine Worte, also ist Aus richtig. Riesige Display-Schrift, ein einzelnes Wort quer über ein Plakat, steht für sich und sieht mit Unsichtbar oft besser aus. Lettering-Effekte wie Kontur oder Extrusion, behandelt in [Lettering-Effekte](https://gradiently.design/de/guide/lettering-treatments), bringen ihren eigenen Kontrast schon mit. Heb die starken Stufen für die Aufgaben auf, die sie brauchen: Kleingedrucktes, lange Details und alles, was in Eile gelesen wird.

## FAQ

### Wie passt sich ein Gradiently Mark dem Text an?

Er schiebt seinen ruhigsten, kontrastreichsten Bereich hinter deine Worte, vertieft oder hellt Farben nahe den Buchstaben auf und beruhigt unruhige Details, ganz ohne Kästen, Schatten oder Unschärfe.

### Kann ich verhindern, dass der Hintergrund auf meinen Text reagiert?

Ja. Stell die Reaktion auf Aus, dann ignoriert das Material deine Worte, was zu Hintergrundbildern und Designs ohne Text passt.

### Welche Reaktionsstufe sollte ich nutzen?

Dezent passt zu den meisten Posts und Stories. Nimm Klar oder Kräftig für kleine Schrift, lange Texte, Speisekarten und alles, was man aus der Entfernung liest.

### Funktioniert die Reaktion, wenn ich ein Design in der Größe ändere?

Ja. Ein Mark wird für jede Größe neu gezeichnet und macht im neuen Format wieder dort Platz, wo die Worte landen.