# White background design: when blank space is the best choice

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

A white background is the most common choice in design and the easiest to get wrong. Here is when it is the right call, which whites to use, and how to stop it looking like a blank page.

## The short version

- A white background works best when the content is the point: a product photo, a long read, a price list or a single strong headline.
- Pure white #ffffff is harsh on screens for long reading, so most considered designs use an off-white with a slight warm or cool tint.
- Black text on white has a very high contrast ratio, so you can afford a softer near-black such as #1c1917 and still read comfortably.
- White space only looks intentional when it is generous and consistent; a cramped white layout looks unfinished rather than minimal.
- One quiet detail, such as a faint grain, a hairline rule or a soft corner light, stops a white background feeling like an empty file.

**White background design** is the best choice when the thing on top deserves all the attention: a product, a photograph, a long paragraph, a single sentence that needs to land. It fails when white is chosen by default, because then it reads as a page nobody finished. The difference comes down to three decisions: which white, how much space, and one small detail that tells the viewer the emptiness was on purpose.

## When a white background is the right choice

White has no mood of its own, which is its strength. It gets out of the way. That makes it the natural ground for anything with its own colour or texture, and the worst ground for anything that needs atmosphere to carry it.

### White works for

- Product photos where colour accuracy matters
- Long reading: articles, menus, terms, reports
- A single bold headline with nothing else
- Price lists and comparison tables
- Brands built on restraint and clarity

### White struggles with

- Night events, music and anything nocturnal
- Light, pale photos that bleed into the page
- Feeds where every competitor already uses white
- Short posts with too little content to fill the space
- Designs that need warmth or drama to land

If your design sits on the right of that table, a soft colour ground or a gentle gradient will usually serve it better. [Minimalist backgrounds](https://gradiently.design/guide/minimalist-backgrounds) covers quiet options beyond white, and [dark mode design](https://gradiently.design/guide/dark-mode-design) covers the opposite end.

## Pick an off-white, not pure white

Pure `#ffffff` is the brightest thing a screen can show. For a photo backdrop that is fine; for a page someone reads for two minutes, it glares. An off-white lowers the brightness slightly and gives the page a temperature. Warm whites feel printed, calm and human. Cool whites feel clinical, technical and precise. Choose the one that matches what you sell.

- Pure white: #ffffff
- Paper: #faf7f2
- Linen: #f7f1e8
- Oat: #f5f0eb
- Cloud: #f4f6f8
- Mist: #f1f5f4
- Warm ink: #1c1917

Five off-whites next to pure white, and a warm near-black to set on them. The differences look tiny in swatches and obvious across a whole page.

| White | Hex | Feels | Use it for |
| --- | --- | --- | --- |
| Pure white | `#ffffff` | Bright, neutral | Product cutouts, ecommerce listings |
| Paper | `#faf7f2` | Printed, calm | Journals, newsletters, menus |
| Linen | `#f7f1e8` | Warm, handmade | Bakeries, florists, stationery |
| Cloud | `#f4f6f8` | Cool, precise | Software, finance, clinics |
| Mist | `#f1f5f4` | Fresh, clean | Skincare, wellness, dental |

Copy a white by its temperature. Then keep it everywhere: a website, a deck and a post in three different whites look like three brands.

## Give the words room

White space is not what is left over. It is a layout decision, and it only reads as intentional when it is generous. A practical rule: margins of at least 8 percent of the shorter side, so 86 px on a 1080×1350 post, and more space between groups than inside them. A headline, a short line under it and a small detail at the bottom is plenty for one post.

A calm portrait post with a short headline centred in generous empty space

One line, a small eyebrow and a quiet detail. The space carries as much meaning as the words.

A portrait post listing opening hours with wide margins around a short block of text

A practical post still reads as calm when the margins stay wide and the type stays small.

Hierarchy matters more on white than anywhere else, because there is no colour to point the eye. Use size and weight to rank the words, as described in [visual hierarchy](https://gradiently.design/guide/visual-hierarchy), and keep to one typeface family if you can.

## Text colour on a white background

Pure black on pure white has the highest contrast a screen can show, which is more than reading needs and can feel stark. A near-black with a hint of the background's temperature, such as `#1c1917` on a warm white or `#0f172a` on a cool one, still clears every accessibility threshold with room to spare. For body text keep a contrast ratio of at least 4.5:1; [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) explains how to check it.

> **Light grey text is the classic mistake** Grey type on an off-white looks elegant in a design file and disappears on a phone in sunlight. If a line matters, keep it dark. Use size, not paleness, to make secondary text quieter.

## Stop a white background looking unfinished

The risk with white is that it looks like an empty canvas rather than a chosen one. One quiet detail is enough to fix that. Pick one, not all of them.

- **A faint grain** at very low strength, so the white reads as a surface. See [grain texture](https://gradiently.design/guide/textured-background).
- **A soft corner light**, a warm white fading to a slightly deeper cream in one corner.
- **A hairline rule** or thin border in your ink colour, a few pixels wide.
- **One accent colour** used once, on a price, a date or a button.
- **A paper feel** for printed or crafted brands; [paper texture](https://gradiently.design/guide/paper-texture-background) shows how.

- Paper with a warm corner: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- White to cloud: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Mist with a top light: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Three whites that are barely gradients at all. On a phone they read as white with depth, never as colour.

## A white background in CSS

On the web, set the off-white once as a variable so every section shares it, and give images a matching backdrop so product shots on pure white don't show as boxes against your paper colour.

```css
:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}
```

`mix-blend-mode: multiply` makes the white around a product photo take on the page colour, so cutouts sit naturally on an off-white.

If you want a white look with a little more character, Gradiently's light Marks are a good place to start: soft, pale grounds with real material and light, where the calmest area moves behind your words and **Auto ink** keeps every line dark enough to read. Designing with any unclaimed Mark is free; claim the one you like when you are ready to export.

## FAQ

### What is the best off-white colour code for a background?

A warm paper white such as `#faf7f2` suits most editorial and lifestyle brands, and a cool white such as `#f4f6f8` suits software and clinical brands. Pick one and use it everywhere.

### Is pure white bad for websites?

Not bad, but bright. Pure white is ideal behind product cutouts; for long reading, a slightly tinted off-white is gentler on the eyes.

### What colour text looks best on a white background?

A near-black such as `#1c1917` or `#0f172a`. It reads as black, keeps contrast well above 4.5:1 and feels softer than pure black.

### How do I make a white background look less boring?

Add one quiet detail: faint grain, a soft corner light, a hairline rule or a single accent colour. Keep the margins generous so the space looks chosen.

### Why do my product photos show a box on my off-white site?

The photos were shot on pure white. Use `mix-blend-mode: multiply` on the images, or export them with a transparent background.