NodlumeWarm · Linear
Gold gradient
Gold is a metal, and a metal is a gradient with a highlight: this one runs a deep amber up through a bright yellow band and back down, which is what makes a flat shape read as a surface catching light. Three stops are the minimum for the effect; two stops give you a yellow-to-orange ramp, which is a sunset, not a metal.
It earns its keep on small things — a premium badge, a rank, a headline clipped with background-clip: text — where the highlight band lands across the glyphs. On a large surface the same band becomes a stripe. Set it at 90° for text so the highlight crosses the letters horizontally, and never put it behind text of its own hue.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #b453090%
- #fbbf2445%
- #fde68a55%
- #b45309100%
CSS
.gold {
background-image: linear-gradient(90deg in oklab, #b45309 0%, #fbbf24 45%, #fde68a 55%, #b45309 100%);
}Tailwind
bg-[image:linear-gradient(90deg_in_oklab,_#b45309_0%,_#fbbf24_45%,_#fde68a_55%,_#b45309_100%)]
Token
--gradient-gold: linear-gradient(90deg in oklab, #b45309 0%, #fbbf24 45%, #fde68a 55%, #b45309 100%);
Gold, answered
- What are the CSS colors in the Gold gradient?
- Gold uses 3 colors: #b45309, #fbbf24, #fde68a. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(90deg in oklab, #b45309 0%, #fbbf24 45%, #fde68a 55%, #b45309 100%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Gold gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Gold gradient interpolated in oklab?
- Two colors interpolated in sRGB pass through a grayer, darker middle than either end; in oklab the midpoint is perceptually between them, so the ramp stays clean. Every gradient function accepts an in <space> keyword, and oklab is the right default for a color-to-color ramp.