# Beige gradient: warm neutral codes that feel calm

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

Beige is easy to get almost right and surprisingly hard to get right. The trick is choosing an undertone, keeping enough range to show the blend, and giving it texture.

## The short version

- A beige gradient looks calm and expensive when every stop shares one undertone: pink, yellow or grey.
- Beige gradients need a wider lightness range than people expect, or the blend disappears and the design looks flat.
- Light, low contrast gradients band easily on screens, and a fine grain layer is the most reliable fix.
- Warm dark browns such as espresso read better on beige than pure black, and white type rarely works on it.
- Sand gradients run from pale cream to a toasted gold, the way a dune darkens on its shaded side.

A **beige gradient** blends warm neutrals, cream, sand, oat and linen, from a light tone into a slightly deeper one, all sharing the same undertone. Done well it feels calm, natural and quietly premium, which is why skincare, interiors, weddings and slow fashion love it. Done badly it looks like a scan of an old envelope. The difference comes down to three choices: one undertone, enough range and a little texture. Codes for each look follow.

## Choose an undertone before a colour

Every beige leans somewhere. Pink beiges feel soft and skin like. Yellow beiges feel sunny and sandy. Grey beiges, often called greige, feel architectural and cool. Mixing undertones in one gradient is the main reason beige looks dirty: a pink stop next to a grey one reads as a stain rather than a blend. Decide first, then stay there.

- Linen: #faf6ef
- Blush beige: #ecd3c6
- Rose sand: #d4ae9c
- Sand: #e8cfa8
- Honey dune: #c9a273
- Greige: #ddd6cc
- Stone: #b9b0a3
- Espresso ink: #3b2a1e

Three undertone families: pink in the blush pair, yellow in the sand pair, grey in greige and stone. Linen and espresso work with all three.

## Sand gradient codes

A **sand gradient** follows a dune: bright and creamy on the side facing the sun, deeper and more golden on the shaded side. These are the warmest beiges here and the most forgiving, because the yellow undertone keeps them from going grey.

- Sand dune: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Desert noon: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Dune shadow: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Wet sand: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Four sand looks. Dune shadow has the widest range and holds up best at small sizes; desert noon is the brightest and suits dark type everywhere.

## Linen, oat and stone codes

These are the quieter beiges, closer to cream and greige. They make excellent backgrounds for product photos and long reading, since they sit back and let everything else lead. Linen is the subtlest, barely a gradient at all; blush beige brings the pink undertone; stone is the coolest, almost grey.

- Linen: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Oat latte: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Blush beige: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Stone: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Soft neutrals. If a beige gradient looks like a flat colour on your screen, the range is too small: deepen the last stop.

For the wider family of calm tones, see [neutral colour palettes](https://gradiently.design/guide/neutral-color-palettes) and [earth tone colours](https://gradiently.design/guide/earth-tone-colors). When you want the deeper end of the same family, coffee and caramel, the [brown gradient](https://gradiently.design/guide/brown-gradient) codes continue where these stop.

## Why beige gradients band, and how to fix it

Light gradients with a small range only pass through a handful of distinct colour values, so a screen draws them as visible steps, and heavy compression makes it worse. Beige is particularly prone to it. A fine grain layer breaks the steps up and, as a bonus, makes beige look like paper, plaster or fabric rather than a screen colour. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains the cause in detail.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

A sand gradient with an SVG noise layer multiplied over it. Raise the opacity for a rougher, more papery surface.

More grain recipes, and how strong to go, are in [grainy gradients](https://gradiently.design/guide/grainy-gradients). Gradiently Marks carry grain as part of their recipe, so a beige Mark arrives with its texture already balanced at every size.

## Type colours that suit beige

| Ink | Hex | Effect | Use for |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Warm and soft, still very legible | Headlines and body on any beige |
| Charcoal | `#2b2b2b` | Crisp and modern | Stone and greige backgrounds |
| Deep olive | `#3d4a2f` | Natural, a little unexpected | Sand and oat backgrounds |
| Terracotta | `#a4502f` | Warm accent | Large headlines and prices only |
| White | `#ffffff` | Weak on light beige | Large headlines on the deepest dune shadow stops only |

Black works, but espresso brown keeps the whole design inside the same warm family.

## Beige that looks calm, not dull

### Looks dull

- Pink, yellow and grey beiges in one blend
- Two stops so close the blend is invisible
- A clean digital surface with visible bands
- Pure black type and a busy layout
- White text on light sand

### Looks calm

- One undertone across every stop
- A clear range from cream to toasted sand
- A fine grain that reads as paper or plaster
- Espresso type and generous space
- Dark ink, with one terracotta accent

Beige rewards restraint. Few words, plenty of space and one strong product shot will look more expensive than any amount of decoration. That is the look behind most good [skincare brand design](https://gradiently.design/guide/skincare-brand-design), and it carries well into wedding stationery and interior studios.

A portrait post on a warm sand coloured background with the words Less, but better in dark brown type

A skincare launch post in a sand Mark. Espresso type, one line, lots of air.

## Where a beige gradient earns its place

Beige works hardest where it supports something else: a product, a photograph, a few careful words. A few places it shines, with the sizes to design at:

- **Product photos:** a linen or oat gradient behind a bottle or a ceramic piece, at 2048×2048 for a Shopify product image, keeps the object as the hero.
- **Wedding stationery:** blush beige or sand for invitations at 5×7 in (1500×2100 at 300 dpi), with espresso or deep olive type. More ideas in [wedding colour palettes](https://gradiently.design/guide/wedding-color-palettes).
- **Interiors and architecture:** stone and greige gradients for portfolio covers and project posts, where the photography provides the colour. See [interior designer branding](https://gradiently.design/guide/interior-designer-branding).
- **Website sections:** a linen gradient behind a testimonial or a pricing table separates it from white sections without a hard border.
- **A calm Instagram grid:** alternate sand posts with photos and the feed reads as one considered whole.

Because beige is so subtle, the same gradient can look right on a story and washed out on a wide banner. Render it for each format rather than stretching one file, and check the lightest stop on a phone at full brightness, where pale beige can drift towards plain white.

## FAQ

### What colours make a beige gradient?

Cream, sand, oat and linen tones that share one undertone, for example #f6ead6 to #e8cfa8 to #c9a273 for a warm sand gradient.

### Why does my beige gradient look dirty?

It is usually mixing undertones, such as a pink beige next to a grey one. Keep every stop in the same family.

### What font colour goes on a beige background?

A warm dark brown such as espresso #3b2a1e reads clearly and feels softer than black. Charcoal suits the cooler greige tones.

### How do I stop a light gradient from banding?

Widen the range between the first and last stops, add a fine grain layer over the gradient, and export as PNG rather than a compressed JPEG.