Gold CSS Gradient Generator

A warm gold CSS gradient that shimmers from pale champagne through rich gold into deep amber. It reads as luxury and premium, ideal for badges, awards and high-end brands. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (100°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 100deg, #fef3c7 0%, #f59e0b 50%, #b45309 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 100deg, #fef3c7 0%, #f59e0b 50%, #b45309 100%);
}

About the gold gradient

Gold gradients suggest luxury, reward and quality, so they show up on premium badges, certificates and high-end product pages. A convincing gold blend needs a light highlight, a saturated mid gold and a darker amber shadow, which is what this preset gives you. Add more stops that alternate light and dark for a metallic sheen. Copy the CSS or Tailwind v4 export when it looks right.

The CSS for this gradient:

background: linear-gradient(in oklch 100deg, #fef3c7 0%, #f59e0b 50%, #b45309 100%);

Frequently Asked Questions

Combine a pale champagne highlight (#fef3c7), a saturated gold (#f59e0b) and a darker amber (#b45309) in a linear-gradient. The light-to-dark contrast is what makes it read as metallic gold rather than plain yellow.

Add extra stops that alternate between light and darker gold so the gradient has highlights and shadows, like light reflecting off metal. A single flat gold looks like yellow; the alternating bands sell the metallic effect.