本文介绍如何使用CSS实现文字颜色渐变效果。

 
CSS实现文字颜色渐变效果

CSS

body {
  display: grid;
  place-items: center;
  background: black;
  text-align: center;
  padding: 120px 20px;
}

h1 {
  display: inline-block;
  font-size: 80px;
  line-height: 0.9;
  padding: 20px;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  background: radial-gradient(
    circle farthest-corner at center center,
    white,
    #111
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML

<h1>mega<br>fancy</h1>

execcodegetcode

解释：

1、文字颜色设置代码是这行

background: radial-gradient(
    circle farthest-corner at center center,
    white,
    #111
  ) no-repeat;

white 和 #111

2、background-clip 属性，它允许你控制背景图像或颜色超出元素的填充或内容的程度。

相关文章推荐

  • 3个使用CSS创建的霓虹灯效果/发光效果文本

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。