# Gold gradient: codes for metallic gold that looks real

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

Most digital gold looks like orange juice or mustard. Real gold is mostly brown shadow, a little ochre and one pale flash of light. Here are codes that get it right, and the reasons they work.

## The short version

- A realistic gold gradient runs from a deep brown shadow through a muted ochre midtone to a pale cream highlight, then back to shadow.
- Gold looks orange when its colours are too saturated and too red, and looks like flat yellow when it lacks a dark shadow and a near white highlight.
- Metallic gold depends on contrast: the darkest and lightest stops should be far apart in brightness, with the highlight kept narrow.
- In CSS, gold text is a gold linear gradient clipped to the letters with background-clip: text.
- Gold looks most precious used sparingly, on a dark ground such as black, navy or deep green.

A **gold gradient** looks like real metal when it covers a wide range of brightness: a deep brown shadow, a muted ochre middle, a narrow pale cream highlight, and back down to brown. The classic code to start from is `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. Most gold gradients fail because they use two bright yellows and oranges with no real shadow or highlight, which reads as orange paint rather than metal.

## Gold gradient codes you can copy

- Classic gold: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Champagne gold: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Rose gold: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Antique gold: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Bright gold foil: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Gold light on black: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Six golds, each with a dark shadow and a narrow light highlight. The first five are for type, borders and shapes; the last is a background.

- Shadow bronze: #5c3d12
- Deep ochre: #7a5418
- Old gold: #b8862b
- Metallic gold: #c79a3c
- Pale highlight: #f3dc9a
- Specular cream: #fff6dc

The gold colour codes behind Classic gold, from shadow to highlight, plus a specular cream to use only in a sliver, if at all.

## Why your gold gradient looks orange

On screens, gold is an illusion made from contrast. There is no gold pixel, only browns and yellows arranged so the eye reads a reflective surface. When something goes wrong, it usually goes wrong in one of four ways.

| It looks | Why | Fix |
| --- | --- | --- |
| Orange | Midtones too red and too saturated | Shift hues towards yellow ochre and lower saturation |
| Flat yellow | No dark shadow, no pale highlight | Add a brown stop near the ends and a cream stop in the middle |
| Brown or muddy | Highlight too dark, too many dull stops | Lift the highlight close to cream and narrow the dark zones |
| Greenish | Yellows too cool, shadows too grey | Warm the shadows to brown rather than olive or grey |

The four classic gold failures and how to fix each one.

The orange problem is the most common because the yellow you pick in a colour picker often looks too pale, so people push it warmer. Resist: keep the midtone hue around ochre, roughly where yellow meets brown, and let contrast provide the shine. If a plain warm blend is what you actually want, [yellow gradient](https://gradiently.design/guide/yellow-gradient) and [orange gradient](https://gradiently.design/guide/orange-gradient) cover those directly.

## How to light gold so it looks real

1. **Start from the shadow** Pick a deep, warm brown. It should be dark enough that white text would read on it.
2. **Add one muted midtone** An ochre gold, slightly desaturated. This is the colour people will remember, so most of the surface sits here.
3. **Place a narrow highlight** A pale cream in a thin band, off centre. The narrower it is, the shinier the metal looks.
4. **Return to shadow** Fall back to a darker ochre after the highlight, so the light reads as a reflection on a curved surface.
5. **Add a second, weaker highlight** Optional: a softer lift near the far end, as if a second light catches the edge. It makes flat shapes feel rounded.

Gold reflects like any polished metal, so the same logic behind [chrome text effect](https://gradiently.design/guide/chrome-effect) applies, only warmer and with softer transitions. Gold gradients with long, subtle runs can show banding after compression; [gradient banding](https://gradiently.design/guide/gradient-banding) explains how a fine grain prevents it.

## Gold text in CSS

```css
.gold {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #c79a3c; /* fallback */
  background: linear-gradient(
    135deg,
    #5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
    #c79a3c 58%, #7a5418 80%, #d6b062 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-rule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}
```

Gold headline text and a thin gold divider. The fallback colour shows wherever gradient clipping isn't supported.

Gold gradients suit serif and high contrast type at large sizes. Below about 24 pixels the shadow and highlight blur into an even brown, so set small text in a solid gold tone like `#c79a3c` instead, and check its contrast against the background. [Gradient text](https://gradiently.design/guide/css-gradient-text) covers browser support for the clipping technique.

## Gold gradients in print

A gold gradient is a picture of metal, not metal. Printed in ordinary four colour ink it comes out as browns and yellows that suggest shine, which is fine for flyers and posters but never truly reflective. For invitations, business cards and packaging where real shine matters, printers use metallic inks or foil stamping, and you supply the gold area as a separate flat shape in the artwork.

If you do print a gradient, expect it to come out slightly darker and less vivid than on screen. Brighten the highlight a touch, avoid very long subtle runs that can band, and ask for a proof before a large print run.

## Designing with gold

Gold reads as precious when it is rare. A thin border, a monogram, one word in a headline, a divider line: on a dark ground of black, navy, oxblood or deep green. Cover a whole poster in gold and it turns brassy. [Black and gold gradient](https://gradiently.design/guide/black-and-gold-gradient) has pairings for the most classic combination, and [luxury brand design](https://gradiently.design/guide/luxury-design) shows how gold fits into a restrained identity.

A portrait gala invitation on a dark background with warm gold light and cream type

A 5×7 inch invitation: a dark ground with warm metallic light, and words set in calm cream.

A portrait jewellery post with a short line on a deep surface touched with gold light

A jewellery post where gold appears only as light on the surface, never as a large flat fill.

For a warm look that lives behind every design rather than being rebuilt each time, search Gradiently's Market with colour words such as "warm gold" or "bronze". Each Mark is a living background with light and grain, which can have only one owner at a time and keeps its calmest area behind your words at every size.

## FAQ

### What is the best gold gradient code?

A good starting point is `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: brown shadow, ochre midtone, pale highlight and back to shadow.

### What hex codes make a metallic gold?

Combine a dark bronze like #5c3d12, an old gold like #b8862b, a metallic gold like #c79a3c and a pale highlight like #f3dc9a.

### Why does my gold gradient look orange?

The midtones are too red and saturated. Shift them towards yellow ochre, lower the saturation, and add a dark brown shadow and pale cream highlight for contrast.

### How do I make gold text in CSS?

Apply a gold linear gradient as the background, then use `background-clip: text` and `-webkit-text-fill-color: transparent`, with a solid gold `color` as a fallback.

### What colour goes best with gold?

Black, navy, deep green, oxblood and warm cream. Dark grounds make gold look brightest and most precious.