Physical / Industrial
Gold
A warm metallic material with high contrast bands, premium shine, and a heavy sense of value.
Go
Usage
- Pricing highlights
- Awards
- Premium badges
Adjustable parameters
- band contrast
- grain
- highlight
- warmth
- edge
AI Prompt
Create a polished gold UI surface with warm metallic bands, crisp edge highlights, subtle brushed grain, and strong contrast without looking cheap.
Tailwind notes
Layer linear gradients and add thin inset highlights. Use dark text or deep brown foreground.
Performance notes
Static metal gradients are cheap. Do not use large animated shine sweeps by default.
CSS
.gold {
background:
linear-gradient(100deg, #5b3506 0%, #d89b23 18%, #fff0a5 34%, #b77714 54%, #f6d56a 72%, #6b3c06 100%);
color: #201303;
border: 1px solid #f2cd62;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px rgba(205, 143, 31, .2);
}React example
export function GoldBadge({ children }) {
return <span className="gold">{children}</span>;
}