Rose gold gradient

Rose gold is a warm pink-copper metallic. Like gold, it needs a gradient: a soft blush highlight between deeper copper-pink tones. Below are 12 rose gold gradients — copy the CSS, download a PNG, or open one in the editor.

Quick copy — rose gold metallic:

background: linear-gradient(90deg, #c68f81 0%, #ca9485 4.2%, #ce998a 8.3%, #d29f8e 12.5%, #d5a493 16.7%, #d9a998 20.8%, #ddaf9d 25%, #e1b4a1 29.2%, #e5b9a6 33.3%, #e9bfab 37.5%, #ecc4b1 41.7%, #f0cab6 45.8%, #f4cfbb 50%, #f1cab6 54.2%, #edc5b2 58.3%, #eac0ad 62.5%, #e7bba8 66.7%, #e3b7a4 70.8%, #e0b2a0 75%, #ddad9b 79.2%, #d9a897 83.3%, #d6a393 87.5%, #d39f8f 91.7%, #cf9a8b 95.8%, #cc9587 100%); background: linear-gradient(in oklch 90deg, #c68f81 0%, #f4cfbb 50%, #cc9587 100%);
  • Aa · 6.8:1

    Black text: Passes AA

    Rose gold metallic

    #c68f81 → #f4cfbb → #cc9587
  • Aa · 8.5:1

    Black text: Passes AA

    Rose gold soft

    #f8d5cf → #daa197
  • Aa · 9.8:1

    Black text: Passes AA

    Rose gold blush

    #fbdcdf → #e1b1a4
  • Aa · 3.7:1

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

    Rose gold copper

    #c8856e → #9f5d4d
  • Aa · 8.2:1

    Black text: Passes AA

    Rose gold shine

    #d1a098 → #f8e4d4 → #d1a098
  • Aa · 2.8:1

    Black text: Fails AA — no plain text

    Rose gold deep

    #c68e85 → #854b46
  • Aa · 9.2:1

    Black text: Passes AA

    Rose gold champagne

    #f3d8c4 → #dbaa9e
  • Aa · 6.3:1

    Black text: Passes AA

    Rose gold band

    #c48777 → #f5d7c7 → #c48777
  • Aa · 5.8:1

    Black text: Passes AA

    Rose gold glow

    #faded2 → #be8075
  • Aa · 9.2:1

    Black text: Passes AA

    Rose gold to pink

    #dfa996 → #eaa9bb
  • Aa · 1.9:1

    White text: Fails AA — no plain text

    Rose gold to charcoal

    #e1b1a4 → #332c2b
  • Aa · 4.6:1

    Black text: Passes AA

    Rose gold three-step

    #eed1c1 → #d69f90 → #ab6e64

Using rose gold gradients well

Good for: beauty, jewellery and wedding brands, premium product tiers, invitations, phone and accessory mockups.

Pairing: Rose gold pairs with charcoal, black, deep green or a soft blush. Keep the rest of the palette quiet so the metallic band carries the look.

Readable text: Rose gold is light, so dark text is the safe choice. White text only passes over the deepest copper tones; check each swatch’s ratio. 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 rose gold gradient?

A simple rose gold gradient is background: linear-gradient(in oklch 90deg, #c68f81 0%, #f4cfbb 50%, #cc9587 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with rose gold in a gradient?

Rose gold pairs with charcoal, black, deep green or a soft blush. Keep the rest of the palette quiet so the metallic band carries the look.

What text colour is readable on a rose gold gradient?

Rose gold is light, so dark text is the safe choice. White text only passes over the deepest copper tones; check each swatch’s ratio. 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 rose 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 rose gold gradients typically used?

Common uses: beauty, jewellery and wedding brands, premium product tiers, invitations, phone and accessory mockups.

More colour gradients