# A background that adapts to text: how a Mark makes room

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

Most backgrounds are pictures, and pictures don't know where your headline is. A Mark does, so it rearranges itself to let the words through instead of hiding behind a box.

## The short version

- A Gradiently Mark is a background that adapts to text, because it is drawn live and knows where the words on the design are.
- Behind your words, a Mark moves its calmest, best contrasting region into place, deepens or lifts the colours near the letters and relaxes busy detail.
- The reaction uses no boxes, shadows or blur, so the background stays whole and the words still read.
- You choose how strongly a Mark responds, from Off through Invisible, Subtle and Clear to Bold, and can fine tune it with Tone, Calm, Bend and Reach.
- Because the Mark is drawn fresh for every size, it makes room again wherever the words land in each format.

A Gradiently Mark is a **background that adapts to text**. Because it is drawn live rather than stored as a picture, it knows where your words are, and it rearranges itself around them: the calmest, best contrasting part of the material moves behind the text, colours near the letters deepen or lift, and busy detail relaxes. Nothing is laid on top. There are no boxes, no shadows and no blur, so you keep the whole background and the words still read.

## The usual ways to make text readable, and what they cost

Put a headline on a lively gradient or photo and part of it disappears. The standard fixes all work by covering the background up, which is a strange outcome when the background was the reason you chose the design.

### Covering the background

- A solid or frosted box behind the words
- A drop shadow on every letter
- Blurring the area behind the text
- A dark overlay across the whole image

### A Mark making room

- Its calm region moves to where the words are
- Colours near the letters deepen or lift
- Grain, ridges and flares relax behind type
- The rest of the background stays as vivid as before

Each fix has its place on a flat image, and [text on a gradient background](https://gradiently.design/guide/text-on-gradient) covers them honestly. The difference with a Mark is that the background takes part, rather than being masked.

## What a Mark does around your words

1. **It settles** The material shifts so your words land on its calmest part. Light that would have sat behind the headline drifts into the open space around it.
2. **It changes tone** Close to the letters, the palette slides towards a colour that contrasts with the type: deeper behind light ink, lighter behind dark ink.
3. **It calms** Warp, busyness and fine detail relax behind the words, so a strong texture never cuts through a thin stroke.
4. **It bends around the edges** Patterns curve slightly at the edge of the words instead of running straight through them.

An event poster for a late night museum opening where the gradient's brightest area sits behind the title

Reaction off: the material runs straight through the words, exactly as a flat image would.

The same museum poster where the gradient has settled into a calm, deeper tone behind the title and details

Reaction on: the same Mark settles a deeper, quieter area behind the type and keeps its colour elsewhere.

The reaction works hand in hand with [Auto ink](https://gradiently.design/guide/auto-ink-legibility), which picks the Mark's light or dark ink for each line. The background makes the room; Auto ink chooses the right colour to fill it.

## Choosing how strongly the background responds

You decide how much the Mark gives way. The panel for this is called Around your words, and it starts with five levels.

| Level | What it does | Good for |
| --- | --- | --- |
| Off | The material ignores your words | Wallpapers and art prints with no text |
| Invisible | Acts only where it is needed; nobody will notice | Big, bold headlines on calm Marks |
| Subtle | Balanced: the look stays, the words read | Most social posts and stories |
| Clear | Words always win | Menus, price lists, event details |
| Bold | The most contrast it gives, calm a little wider | Small type, long text, signs read from across a room |

Five starting points. Subtle is a sensible default; move up whenever the words get smaller or longer.

Under the levels are four dials for fine tuning: **Tone** sets how far the material settles behind words for contrast, **Calm** how much warp and busyness relax, **Bend** how much the pattern curves at the edge of the words, and **Reach** whether it hugs each letter or responds around the whole block of text.

> **Reach is the dial most people need** For a short headline, a tight reach keeps the background lively right up to the letters. For a paragraph or a list, a wider reach calms one clear area for the whole block, which is easier to read.

## Why it matters at every size

A flat background image is laid out once. Crop it to a story and the bright spot may land right behind the headline. A Mark is drawn fresh for each format, so when a design moves from a post to a story to a banner, the words move too and the Mark makes room again wherever they land. That is what lets [one look work at every size](https://gradiently.design/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

Four shapes, four different places for the headline. The calm area follows the words in each.

## A simple version of the idea in CSS

On the web you can borrow the principle with a plain gradient: put the deepest, calmest part of the background where your text sits and keep the colour out at the edges. It won't follow the words when the layout changes, but it beats a box.

Calm, deep area placed behind the text: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

The text block sits in the dark plum ellipse low on the left; the peach and rose stay vivid towards the edges.

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

Move the ellipse's position to wherever your heading sits. [Gradient overlay CSS](https://gradiently.design/guide/css-gradient-overlay) shows the same trick on top of a photo.

## When to turn the reaction down

Not every design wants maximum legibility. A phone wallpaper has no words at all, so Off is right. Huge display lettering, a single word across a poster, can stand on its own and often looks better with Invisible. Lettering treatments such as Contour or Extrude, covered in [lettering effects](https://gradiently.design/guide/lettering-treatments), already carry their own contrast. Keep the strong levels for the jobs that need them: small print, long details and anything read in a hurry.

## FAQ

### How does a Gradiently Mark adapt to text?

It moves its calmest, best contrasting area behind your words, deepens or lifts colours near the letters and relaxes busy detail, all without boxes, shadows or blur.

### Can I stop the background reacting to my text?

Yes. Set the reaction to Off and the material ignores your words, which suits wallpapers and designs without text.

### Which reaction level should I use?

Subtle suits most posts and stories. Use Clear or Bold for small type, long text, menus and anything read from a distance.

### Does the reaction work when I resize a design?

Yes. A Mark is drawn fresh for every size, so it makes room again wherever the words land in the new format.