Gold gradient

A flat yellow can’t look metallic. Gold comes from a gradient: dark bronze to a bright highlight and back, imitating light on a curved surface. Below are 12 gold gradients — copy the CSS, download a PNG, or open one in the editor.

Quick copy — gold metallic:

background: linear-gradient(90deg, #ad7c2f 0%, #b38435 2.8%, #ba8b3b 5.5%, #c09341 8.3%, #c69b48 11%, #cda34e 13.8%, #d3ab54 16.5%, #d9b35b 19.3%, #dfbb61 22%, #e5c468 24.8%, #ebcc6f 27.5%, #f1d576 30.3%, #f7dd7d 33%, #f2d677 35.8%, #edce71 38.7%, #e8c76b 41.5%, #e3c066 44.3%, #deb960 47.2%, #d9b15b 50%, #d4aa55 52.8%, #cea350 55.7%, #c99c4b 58.5%, #c49646 61.3%, #be8f41 64.2%, #b9883c 67%, #bd8d40 69.8%, #c29343 72.5%, #c69847 75.3%, #ca9e4b 78%, #cea34f 80.8%, #d2a953 83.5%, #d6ae57 86.3%, #dab45b 89%, #deba5f 91.8%, #e2bf63 94.5%, #e6c568 97.3%, #eacb6c 100%); background: linear-gradient(in oklch 90deg, #ad7c2f 0%, #f7dd7d 33%, #b9883c 67%, #eacb6c 100%);
  • Aa · 5.1:1

    Black text: Passes AA

    Gold metallic

    #ad7c2f → #f7dd7d → #b9883c → #eacb6c
  • Aa · 5.7:1

    Black text: Passes AA

    Gold bar

    #f5de87 → #b7852a → #e5c057
  • Aa · 4.7:1

    Black text: Passes AA

    Gold classic

    #eabe4a → #ac731a
  • Aa · 3.8:1

    Black text: Fails AA — large text only (3:1)

    Gold bronze band

    #99642a → #f4d576 → #99642a
  • Aa · 10.7:1

    Black text: Passes AA

    Gold champagne

    #f8eac6 → #e0bf89
  • Aa · 2.7:1

    White text: Fails AA — no plain text

    Gold deep

    #c8942d → #774914
  • Aa · 9.2:1

    Black text: Passes AA

    Gold bright

    #fce765 → #e6ad00
  • Aa · 3.1:1

    Black text: Fails AA — large text only (3:1)

    Gold antique

    #b89a5a → #7b5d33
  • Aa · 5.0:1

    Black text: Passes AA

    Gold glow

    #feed8c → #b07a20
  • Aa · 2.0:1

    White text: Fails AA — no plain text

    Gold to black

    #ddb049 → #15110d
  • Aa · 7.2:1

    Black text: Passes AA

    Gold sunrise

    #f4c947 → #eb881f
  • Aa · 6.9:1

    Black text: Passes AA

    Gold foil

    #d4a64c → #fcf0b2 → #c5953b → #f3de90

Using gold gradients well

Good for: awards and badges, luxury and premium tiers, wedding and event themes, logos.

Pairing: Run bronze → pale gold → bronze for a metallic band. Pair gold with deep navy, black or burgundy.

Readable text: The light band of a gold gradient needs dark text; place white text only over the bronze ends and check the worst point. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.

These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.

Questions

What is the CSS code for a gold gradient?

A simple gold gradient is background: linear-gradient(in oklch 90deg, #ad7c2f 0%, #f7dd7d 33%, #b9883c 67%, #eacb6c 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with gold in a gradient?

Run bronze → pale gold → bronze for a metallic band. Pair gold with deep navy, black or burgundy.

What text colour is readable on a gold gradient?

The light band of a gold gradient needs dark text; place white text only over the bronze ends and check the worst point. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.

How do I download a gold gradient image?

Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.

Where are gold gradients typically used?

Common uses: awards and badges, luxury and premium tiers, wedding and event themes, logos.

More colour gradients