大家好，我是 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);
}页面渲染效果
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
