CSS Gradient Generator

Metallic gold and rose gold gradients for backgrounds, buttons and headings. A convincing gold is never one color: it moves from a deep bronze into a pale, bright highlight and back, which is what gives it its metallic shine. Hover a gradient to see its colors, or click it to open it in the generator and customize it.

Gold Gradients

Rose Gold Gradients

FAQ

How do I make a gold gradient in CSS?

Use three to five stops of warm yellow-brown, going from a deep bronze to a pale, bright highlight and back, for example linear-gradient(135deg, #715B19 0%, #F8DA8D 33%, #C99519 67%, #FBD284 100%). The contrast between the dark and light stops is what reads as metallic.

What colors make rose gold?

Rose gold is a soft pinkish copper: low-saturation warm pinks from a muted copper up to a pale blush. The same dark to light to dark pattern as gold gives it its sheen.