返回地图
Physical / Industrial

黄金

一种暖金属材质,带高对比金属带、高级光泽和明确价值感。

当前状态: ReadyGo
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>;
}