大家好，我是 Just，这里是「设计师工作日常」，今天分享的是非常实用的渐变字效果。 ?知识点： ?思路： 经常使用的渐变多彩文字效果，该效果适用于大文字标题上，配合中英文字体可以形成比较好的视觉效果。 核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。 文字元素主体。 1、设置文字元素宽度 2、设置文字颜色为透明，然后添加 3、最后设置一个线性渐变色背景，让文字形状剪切出多彩效果。 以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。整体效果
1️⃣ background-clip 属性
2️⃣ background-image 属性中 linear-gradient 线性渐变
打出需要的文字内容，然后利用 background-clip 属性实现蒙版效果。核心代码
html 代码
<div class="text94">Hello World!</div>
css 部分代码
.text94{
width: max-content;
font-size: 24px;
font-weight: 900;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(97deg,#0096FF,#BB64FF 42%,#F2416B 74%,#EB7500);
}max-content ，该属性让宽度是基于实际内容宽度的。background-clip 属性，让文字形状形成蒙版。完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>多彩的文字效果</title>
</head>
<body>
<div class="app">
<div class="text94">Hello World!</div>
</div>
</body>
</html>css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text94{
width: max-content;
font-size: 24px;
font-weight: 900;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(97deg,#0096FF,#BB64FF42%,#F2416B74%,#EB7500);
}页面渲染效果
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
