#每日一記#讓咱們玩起流行的漸變色

今年年初有一波新的設計趨勢席捲前端 UI 界，那就是**「彩色漸變」**。從 Ins 的 logo 開始，淘寶、qq 等阿里系 app 也開始使用大面積的漸變色做爲 ui 色彩方案。

正所謂風水輪流轉，時尚永遠是循環的，當年的擬物到扁平，平了的不僅是空間還有色彩，你們發現太平了玩不開，又設計出扁平陰影，如今 MD 又把物料和空間帶回設計界，天然色彩上也開始復甦了，豐富的顏色又成了新的潮流。

再看看硬件的發展，當年因爲渲染陰影、漸變是十分耗性能的設計，設計開發都儘量避免使用，而現在硬件性能加強、硬件的限制也在變小，渲染流程不斷優化、渲染速度加快、瀏覽器還能夠開啓 GPU 加速，咱們能作到的東西也愈來愈有意思。

不過當年咱們要實現漸變，也是以 background 屬性上設置漸變，能應用的也僅僅是 dom 元素，若是是文字或者是字體 icon 想要漸變，難道只能退化到土耕火種的切圖流了嗎？

固然不用了 由於咱們有了新的 CSS 屬性 background-clip

代碼展現

若是要設置文字的或者字體 icon 的漸變或圖片，只要兩個步驟：

• 設置文字顏色透明 color: transparent;
• 設置背景剪切爲文字 -webkit-background-clip: text;

屬性介紹

background-clip是 CSS Backgrounds and Borders Module Level 3 中的新屬性，該屬性的做用是在盒模型中設定背景的顯示區域。不過查閱了一下不支持 IE8 ，目前也要加前綴纔可使用，不過屬性的功能仍是十分強大的。

JSbin

demo 源碼