Physical / Industrial
黄金
一种暖金属材质,带高对比金属带、高级光泽和明确价值感。
Go
适用场景
- 价格强调
- 奖项
- 高级徽章
可调参数
- band contrast
- grain
- highlight
- warmth
- edge
AI Prompt
生成抛光黄金 UI 表面:暖金属带、清晰边缘高光、轻微拉丝颗粒和强对比,但不要显得廉价。
Tailwind 思路
叠加 linear-gradient 并加入细内高光。前景使用深棕或近黑。
性能提醒
静态金属渐变成本低;默认不要使用大面积扫光动画。
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 示例
export function GoldBadge({ children }) {
return <span className="gold">{children}</span>;
}