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.
On this page
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.
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.
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.
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.
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 and 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.
#0a0a0aText
#d4af37Contrast
Use for
#0a0a0aText
#b8860bContrast
Use for
#14110aText
#c9a227Contrast
Use for
#1a1408Text
#f3e5abContrast
Use for
#0a0a0aText
#8a6d1fContrast
Use for
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 covers the accessibility side.
.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 jeweller's post: warm black, one gold light, plain type.
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 explains the options, and 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. 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile