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.
On this page
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 covers quiet options beyond white, and 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.
Hex
#ffffffFeels
Use it for
#faf7f2Feels
Use it for
#f7f1e8Feels
Use it for
#f4f6f8Feels
Use it for
#f1f5f4Feels
Use it for
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.
One line, a small eyebrow and a quiet detail. The space carries as much meaning as the words.
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, 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 explains how to check it.
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.
- 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 shows how.
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.
: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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile