藍 色 憂 鬱

如果你需要一些顏色配色的靈感，網路上有需多各式各樣的工具，像是adobe kuler、material ui等的網站，可以幫你找出主要色調、對比色調，這些色票排在一起都蠻好看的，但若想要做出美美的漸層還是需要多加嘗試、調整不同的透明度，往往挑個顏色就可以耗上半天的時間。

webgradients提供了180個漂亮的漸層顏色提案，可以一鍵複製CSS，也可以將漸層背景儲存成為PNG檔案，影像製作者也可以參考他的色碼來做出漂亮的漸層，現在成了我做UI不能獲缺的工具。一起來看看要怎麼使用吧！

使用教學

他每個色圈都超美的，心情不好的時候打開來看一下都會被瞬間療癒。

一、網頁背景效果預覽

點擊中間的圓形可以觀看圖片當作網頁背景時的效果。這點滿重要的喔！有些色塊在小範圍看很美，但是用到了大範圍反而不是那麼好看，先預覽可以節省很多時間。

二、產生CSS語法

按下右下角的copy CSS就可以複製CSS語法，

background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);

這個功能對我來說非常重要，因為平常很少用漸層背景的語法，每次要用到時都得google一次，有了這個工具，配色、漸層的角度都被你做好了，完全不需要大腦。

三、產生PNG背景圖

按下右上角的下箭頭，可以得到這張漸層背景的PNG檔案，尺寸是2400x2000只要按右鍵，另存圖片就可以囉！

分享我愛的網站給大家，希望可以給大家一些設計的靈感，不過這個網站有個最大的缺點，就是有選擇障礙的人可能會有點困擾，因為每個都很美，不知道要選哪個XD。

網站資訊

網站名稱：webgradients

網址：https://webgradients.com/