金属质感文字 · 文字
前端Wiki/CSS 特效合集/金属质感文字

金属质感文字

金色金属渐变加投影,质感厚重的高级感标题

← 返回 文字 类特效列表
GOLD

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .metal{text-align:center;font-size:54px;font-weight:900;margin:46px 0;background:linear-gradient(135deg,#bf953f,#fcf6ba,#d4af37,#aa771c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}

HTML 结构

HTML
<div class="fx">
<div class="metal">GOLD</div>
</div>
实现要点:金属 = 多色标金色渐变裁剪到文字 + drop-shadow 投影

其它文字类特效

回到 前端Wiki 首页 · CSS 特效合集