CSS 实现文字颜色渐变 – Clloz ☘️

2024-07-06 02:05| 来源: 网络整理| 查看: 265

CSS 实现文字颜色渐变

Clloz · 4年前 · 3,856次浏览 ·

HomeProgramming > Front end > CSSCSS 实现文字颜色渐变

Clloz

文章目录

1 前言2 文本渐变色实现2.1 background-clip2.2 mask-image3 关于渐变色4 总结5 参考文章

文章目录

1 前言2 文本渐变色实现2.1 background-clip2.2 mask-image3 关于渐变色4 总结5 参考文章前言

我经常将自己的一些突发奇想的设计到自己的博客上尝试。博客首页右侧的热门文章的小工具上的文本颜色一直没找到满意的，于是想试试渐变色的文本会不会有不错的效果。

文本渐变色实现 background-clip

这种实现的主要思路就是对 background 进行裁剪。background-clip 提供了一个 text 属性，可以将背景裁剪成文本的前景色（即只有文本覆盖的部分有背景色），然后我们再将文本颜色设置为 transparent 即可以实现文本颜色的渐变。background-clip 的 text 属性目前仍然是实验功能，需要使用 -webkit-background-clip 才能生效。

text-color-gradient .text-color-gradient { display: inline-block; font-size: 10em; font-weight: 700; background: linear-gradient(0.25turn, #c21500, #ffc500); background-clip: text; -webkit-background-clip: text; color: transparent; } Clloz

mask-image

第二种方法是使用 mask-image 配合伪元素做一个渐变遮罩层。如果我们的渐变是 color A 到 color B，我们可以将文本颜色设为 A，然后用伪元素（content 与元素文本相同）配合 mask-image 做一个渐变的遮罩层，渐变是从 transparent 到 color B，然后我们将伪元素覆盖到原来的文本上，就能得到想要的渐变。

text-color-gradient .text-color-gradient { display: inline-block; font-size: 10em; position: relative; color: #ffc500; } .text-color-gradient[data-text]::after { content: attr(data-text); color: #c21500; position: absolute; left: 0; z-index: 2; -webkit-mask-image: linear-gradient(0.25turn, #c21500, transparent); } Clloz

关于渐变色

关于渐变色推荐一个网站：uigradients，该网站有很多不错的渐变色搭配。另外还有一个软件aquarelo，可以查看渐变色，也支持导出。

总结

这就是我实现渐变的两种方法，总的来说还是第一种方法比较简单好用，并且可以设置两种以上颜色的渐变。mask-image 的 linear-gradient 取值似乎必须要一个 transparent ，并且只能有两个颜色。综合而言还是使用第一个方式比较好。

参考文章 CSS3下的渐变文字效果实现

【本文地址】

公司简介

联系我们