最近看到現在的新手機似乎都做漸層色，感覺挺好看的(暮光金、極光藍)，那不如也在網站上加點漸層吧~

不過大面積使用漸層，沒搭配好的話，感覺挺影響瀏覽體驗的，還是先當作點綴使用。目前規劃在超連結、頁面卷軸、區塊背景這三個地方使用漸層，今天先來寫「漸層文字」。

漸層文字HTML

html這邊就簡單的用個超連結，加上名為graditent-text的class

<a href="https://blog.aidec.tw" class="gradient-text">漸層文字色 - Aidec</a>

漸層文字CSS

a.gradient-text{
    background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to right,#ff8a00,#da1b60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
    font-weight: 700;
}

這邊使用 linear-gradient() 來產生漸層顏色

格式: linear-gradient(角度,顏色,顏色,顏色)

詳細可參閱:https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

漸層文字的關鍵

要有這兩個才能將漸層附加在文字上 (chrome瀏覽器)

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

下面的只是微調用，不加也沒關係。

-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: none;
font-weight: 700;

漸層文字效果實際Demo

https://codepen.io/anon/pen/LoYKQg

延伸文章

用CSS幫網站做漸層捲軸

文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)

原文連結:
https://blog.aidec.tw/post/css-gradient-text
若有業務合作需求，可寫信至： opweb666@gmail.com
創業、網站經營相關內容未來將發布在 小易創業筆記