# White gradient: subtle light codes for clean designs

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

A white gradient is the quietest gradient there is, and the one most designers get slightly wrong. These codes show how much change is enough, which tints to use, and how to fade cleanly to white.

## The short version

- A white gradient blends pure white into an off white only a few percent darker, tinted warm, cool or pearly.
- Off whites with a slight warm tint feel like paper; those with a slight blue tint feel like porcelain or snow.
- A white gradient needs enough range to survive bright phone screens, where very small differences disappear.
- To fade content into a white background in CSS, use a gradient from `rgb(255 255 255 / 0)` to `#ffffff`.
- White gradients make excellent product backgrounds because a soft falloff reads as a lit studio rather than a flat cut out.

A **white gradient** moves from pure white into an off white that is only slightly darker, usually with a gentle warm, cool or pearly tint. The change is small on purpose: it should feel like light falling across a surface, not like colour. That makes white gradients ideal for clean websites, product shots, invitations and minimal social posts. Below you will find how strong to make one, a palette of off whites, copyable codes and the right way to fade into white in CSS.

## How much change a white gradient needs

Too little and nobody sees it, especially on a phone at full brightness. Too much and the white turns grey and dingy. The table gives three strengths, measured by how far the end colour sits below pure white. Most designs want the middle one.

| Strength | From | To | Use for |
| --- | --- | --- | --- |
| Whisper | `#ffffff` | `#f8f8f8` | Large web sections, long reading |
| Soft | `#ffffff` | `#efefef` | Cards, social posts, invitations |
| Visible | `#ffffff` | `#e2e2e2` | Product backgrounds, studio sweeps |

Neutral values for clarity. In practice, tint the end colour slightly warm or cool, as in the codes below.

## Off white colours to build from

Pure neutral greys at the end of a white gradient look a little lifeless. A trace of tint makes the difference: warm off whites read as paper, linen and ivory; cool ones read as porcelain, frost and snow. Choose the tint that matches the rest of your palette, and keep it consistent across a set of designs.

- Pure white: #ffffff
- Ivory: #fffdf8
- Paper: #f6f4f0
- Linen: #f1ece3
- Porcelain: #f1f4f7
- Frost: #eaf2f8
- Pearl lilac: #f3eef8
- Pearl mint: #eef6f6

Off whites. On a white page they look almost identical; side by side, the warm and cool families are clearly different.

## White gradient codes

Each of these starts at or near pure white. Paper and ivory are warm and editorial. Porcelain and frost are cool and technical. Morning light adds a soft glow from one corner, and pearl blends several barely there tints for a delicate iridescence that never tips into a rainbow.

- Paper: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Ivory: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcelain: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Frost: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Morning light: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Pearl: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Six white gradients. On a bright screen they read as surfaces rather than colours, which is exactly the point.

If you want a little more colour while keeping the same airy feel, [pastel gradients](https://gradiently.design/guide/pastel-gradients) are the next step up. For the opposite end of the neutral scale, see the [gray gradient](https://gradiently.design/guide/grey-gradient) codes.

## A white gradient behind products

Photographers light a white backdrop so it falls off softly towards the edges, which separates the object from the background without a shadow line. A radial white gradient does the same on screen. It is especially useful when you cut a product out of its photo: a flat white behind it looks pasted on, while a soft sweep looks like a studio.

Studio sweep: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Brightest just above the centre, where the product sits, falling to a light grey at the corners. Use it at 2048×2048 for Shopify product images.

[Product photo backgrounds](https://gradiently.design/guide/product-photo-backgrounds) covers shadows, colour backdrops and when white is the wrong choice.

## Fade to white with a CSS gradient

The most common white gradient on the web is not a background at all: it is a fade that softens the end of a truncated article, the bottom of a scrolling list or the edge of a photo. Write the transparent end as white with zero opacity. Modern browsers blend `transparent` correctly, but `rgb(255 255 255 / 0)` states exactly what you mean and avoids the greyish band some older engines drew.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

A fade that ends in solid white just before the bottom edge, so the last line of text disappears cleanly. Match the final colour to your page background.

If your page background is an off white rather than pure white, fade to that colour instead, or the fade will end in a visible lighter strip. [CSS gradient transparent](https://gradiently.design/guide/css-gradient-transparent) goes into fades and overlays in more depth.

## Clean white, not washed out

### Washed out

- Ending in a neutral mid grey
- Changes so small they vanish on a phone
- Light grey type on an off white gradient
- Warm and cool off whites mixed together
- Fading to white on a cream page

### Clean

- Ending in a lightly tinted off white
- A soft but visible change, checked on a phone
- Near black or deep navy type
- One tint family throughout
- Fading to the page’s exact background colour

White gradients also band, though less than dark ones; if you see steps on a large monitor, a very fine grain fixes it, as explained in [gradient banding](https://gradiently.design/guide/gradient-banding).

## White gradients in minimal designs

Minimal designs live or die by their type, and white gives it nowhere to hide. Use a strong, near black ink, plenty of space and one detail in colour. A white gradient adds just enough dimension to make the page feel lit and finished. [Minimalist backgrounds](https://gradiently.design/guide/minimalist-backgrounds) has more ideas in the same spirit, and [website hero backgrounds](https://gradiently.design/guide/website-hero-background) shows how a porcelain or morning light gradient can carry a whole landing page.

A portrait wedding invitation with a soft ivory white background and the words You’re invited in dark type

A 5×7 inch invitation on a soft ivory Mark. Dark ink, generous margins and nothing else.

In Gradiently, light Marks work the same way as bold ones: the Mark keeps a calm area behind the words and Auto ink chooses a dark type colour from the Mark’s own palette, so a delicate white never ends up with grey text that disappears.

## FAQ

### What is a good white gradient code?

For a soft paper look, try `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. For a cool porcelain look, end on #e6ebf0 instead.

### How do I make a white to transparent gradient in CSS?

Use `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Change the final colour to your page background if it is not pure white.

### Why is my white gradient invisible?

The end colour is too close to white. Darken it to around #efefef, tinted slightly warm or cool, and check it on a phone at full brightness.

### What text colour works on a white gradient?

Near black, charcoal or deep navy. Avoid light grey type, which fades into the darker end of the gradient.