# Black and gold gradients: luxury codes done tastefully

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

Black and gold is the shorthand for luxury, and the easiest palette to get cheap. The difference is almost always how the gold is built and how little of it you use.

## The short version

- A black and gold gradient pairs a near black ground with gold built from several stops, typically a dark bronze, a warm gold such as #d4af37 and a pale highlight such as #f3e5ab.
- Flat gold looks like mustard on screen, because real gold reads as metal only when light and shadow move across it.
- Black and gold looks most expensive when gold covers a small part of the design, such as a light at one edge, a rule or the type.
- Gold text such as #d4af37 on near black reaches about 9:1 contrast, so it is readable for headlines and short lines.
- Printed gold made from ordinary inks never looks metallic, so use foil or a metallic ink when the real thing matters.

A **black and gold gradient** sets a near black ground against gold that is built from several stops rather than one flat colour: a dark bronze like `#8a6d1f`, a warm gold like `#d4af37` and a pale highlight like `#f3e5ab`. That variation is what makes gold read as metal. Tasteful versions also use far less gold than you might expect, often just a glow at one edge or the type itself. Here are the codes, the CSS for metallic gold text, and the rules that keep the pairing feeling expensive.

## Why flat gold looks cheap

Gold is not really a colour; it is a material. What you recognise as gold is a pattern of reflections: dark olive brown in the shadows, warm yellow in the mid tones, nearly white where the light hits. A single hex value captures only one of those, so a flat `#ffd700` reads as yellow or mustard rather than metal. A gradient with at least three stops does the job the light would.

- Jet: #0a0a0a
- Warm black: #1a1408
- Bronze shadow: #5c4813
- Antique gold: #8a6d1f
- Dark goldenrod: #b8860b
- Metallic gold: #d4af37
- Honey: #e6c76a
- Champagne: #f3e5ab

Two blacks and six golds. A convincing metal uses at least three golds from this ramp, never just one.

## Metallic gold gradient codes

These are the gold fills themselves: for a rule, a badge, a monogram or gradient text. Each runs dark to light to dark, which is what gives the impression of a curved, polished surface catching light.

- Polished gold: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Top lit gold: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Antique bar: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Brushed champagne: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Metallic gold fills. The symmetry, dark at both ends and bright in the middle, is what reads as a curved surface.

## Black and gold gradient backgrounds

For a background, invert the proportions: the black does nearly all of the work and gold arrives as a glow, a horizon or a faint warmth in one corner. A warm black, with a hint of brown, sits better with gold than a pure or blue black does.

- Gold light in the corner: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Gold horizon: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Stage footlight: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Gold edge: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Black and gold backgrounds. In every one, gold covers well under a quarter of the frame.

Dark gradients band more than any other kind, and a gold glow on black is about the worst case. A fine grain layer fixes it and, as a bonus, makes the surface feel like paper or velvet. More grounds are in [black gradients](https://gradiently.design/guide/black-gradient).

## How to keep black and gold tasteful

### Looks cheap

- Flat yellow gold such as `#ffd700`
- Gold covering half the design
- Gold glow halos behind every word
- Gold on pure blue black
- Ornate script and gold and bevels all at once

### Looks expensive

- Gold built from three or more stops
- Gold in one place: a light, a rule or the name
- Plain, well spaced type with no effects
- Gold on warm black
- One elegant typeface, generous margins

Restraint is the whole trick. Luxury packaging tends to show a lot of empty dark space and a small amount of metal, so the metal feels precious. The same goes on screen. [Luxury colour palettes](https://gradiently.design/guide/luxury-color-palettes) and [luxury design](https://gradiently.design/guide/luxury-design) cover the wider language.

## Gold text on a black gradient

Gold reads well on black. The figures below use the WCAG contrast formula; 4.5:1 is the usual minimum for small text and 3:1 for large headlines. Keep the darker antique golds for rules and borders, not words.

| Background | Text | Contrast | Use for |
| --- | --- | --- | --- |
| Jet `#0a0a0a` | Metallic gold `#d4af37` | 9.4:1 | Headlines and short lines |
| Jet `#0a0a0a` | Dark goldenrod `#b8860b` | 6.1:1 | Subheads, labels |
| Warm black `#14110a` | Gold `#c9a227` | 7.8:1 | Headlines |
| Warm black `#1a1408` | Champagne `#f3e5ab` | 14.5:1 | Body text |
| Jet `#0a0a0a` | Antique gold `#8a6d1f` | 4.0:1 | Large text or rules only |

For long text, champagne reads more comfortably than saturated gold.

Metallic gradient text works for a single word or a short name. The CSS below clips the polished gold gradient to the letters and keeps a solid gold fallback. [CSS gradient text](https://gradiently.design/guide/css-gradient-text) covers the accessibility side.

```css
.luxe {
  background-color: #0a0a0a;
  background-image: radial-gradient(circle at 80% 15%, #5c4813 0%, #1a1408 35%, #0a0a0a 75%);
  color: #f3e5ab;
}

.luxe h1 {
  color: #d4af37; /* fallback */
  background: linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}
```

A warm black section with a faint gold light, champagne body text and a polished gold headline.

A portrait jewellery post with pale gold lettering on a warm black background with a faint gold glow in one corner

A jeweller's post: warm black, one gold light, plain type.

A vertical New Year's Eve story with champagne lettering on black fading into a gold horizon at the bottom

A New Year's Eve story with a gold horizon at the bottom.

## Black and gold in print

Ordinary four colour printing cannot reproduce metal. A gold gradient printed in CMYK comes out as a brownish yellow, however carefully you build it. For invitations, business cards and packaging where gold matters, use hot foil or a metallic ink for the gold parts and keep the gradient for screen. [Gradients in print](https://gradiently.design/guide/print-gradients) explains the options, and [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains why screens and paper differ.

## Where to use black and gold

Black and gold suits jewellery, watches, fragrance, spirits, hotels, barbers, black tie events and New Year. It also pairs well with deep wine reds; see [burgundy gradients](https://gradiently.design/guide/maroon-gradient). If you want a dark, warm look that is yours alone, a Gradiently Mark is a recipe of colours, materials, light and grain rather than a flat fill. Every Mark has one owner at a time, and once you claim one, a competitor cannot export it.

## FAQ

### What is the hex code for metallic gold?

A widely used metallic gold is `#d4af37`. For a convincing metal, combine it with a dark bronze such as `#8a6d1f` and a pale highlight such as `#f3e5ab` in a gradient.

### How do I make a gold gradient in CSS?

Use a symmetrical linear gradient that runs dark, bright, highlight, bright, dark, for example `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Is gold text on black readable?

Yes. Metallic gold `#d4af37` on near black reaches about 9:1 contrast. For long passages, a paler champagne gold reads more comfortably.

### Why does my black and gold design look cheap?

Usually because the gold is a single flat yellow, there is too much of it, or it carries glows and bevels. Build gold from several stops and use it in one place.

### Can I print a black and gold gradient?

You can, but CMYK gold looks brownish yellow, not metallic. Use foil or a metallic ink for gold that needs to shine.