#每日一记#让我们玩起流行的渐变色

每日一记 - 但并不日更

今年年初有一波新的设计趋势席卷前端 UI 界，那就是「彩色渐变」。从 Ins 的 logo 开始，淘宝、qq 等阿里系 app 也开始使用大面积的渐变色作为 ui 色彩方案。

Instagram 的彩色 logo 淘宝的 UI 界面

正所谓风水轮流转，时尚永远是循环的，当年的拟物到扁平，平了的不只是空间还有色彩，大家发现太平了玩不开，又设计出扁平阴影，现在 MD 又把物料和空间带回设计界，自然色彩上也开始复苏了，丰富的颜色又成了新的潮流。

再看看硬件的发展，当年由于渲染阴影、渐变是十分耗性能的设计，设计开发都尽可能避免使用，而如今硬件性能增强、硬件的限制也在变小，渲染流程不断优化、渲染速度加快、浏览器还可以开启 GPU 加速，我们能做到的东西也越来越有意思。

不过当年我们要实现渐变，也是以 background 属性上设置渐变，能应用的也仅仅是 dom 元素，如果是文字或者是字体 icon 想要渐变，难道只能退化到土耕火种的切图流了吗？

当然不用了 因为我们有了新的 CSS 属性 background-clip

普通的渐变按钮 支持文字设置渐变或图片

代码展示

如果要设置文字的或者字体 icon 的渐变或图片，只要两个步骤：

• 设置文字颜色透明 color: transparent;
• 设置背景剪切为文字 -webkit-background-clip: text;

CSS 代码

属性介绍

background-clip是 CSS Backgrounds and Borders Module Level 3 中的新属性，该属性的作用是在盒模型中设定背景的显示区域。不过查阅了一下不支持 IE8 ，目前也要加前缀才可以使用，不过属性的功能还是十分强大的。

属性和值

JSbin

demo 源码