White gradient: subtle light codes for clean designs

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.

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.

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.

If you want a little more colour while keeping the same airy feel, pastel gradients are the next step up. For the opposite end of the neutral scale, see the gray 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.

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.

/* 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;
}

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 goes into fades and overlays in more depth.

Clean white, not washed out

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.

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 has more ideas in the same spirit, and website hero backgrounds shows how a porcelain or morning light gradient can carry a whole landing page.

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.