uiGradients 是個給設(shè)計師和開發(fā)者用的開源漸變色合集，有好多現(xiàn)成的線性和徑向漸變。能在線看，也能復制 CSS 代碼，還能通過 gradients.json 在代碼里調(diào)用。很快就能用到網(wǎng)頁、App 或者平面設(shè)計里。

uiGradients核心特點

• 用著省事：挑好喜歡的漸變，點右上角就能復制代碼或者下載圖片。

• 支持多種格式：能出 CSS、SCSS、LESS、Stylus、Swift、Android XML 這些格式，不同技術(shù)的人直接用就行。

• 大家一起維護：所有漸變存在 GitHub 倉庫的 gradients.json 里，誰都能 fork 然后加新配色，PR 過了就能上線。

• 周邊東西多：已經(jīng)有 iOS 擴展、React 組件、SCSS 版本、Handlebars 助手這些相關(guān)項目，在各種工程里用起來快。

• 免費還開源：按 MIT 協(xié)議來，能商用也能改，只要留原作者版權(quán)說明就行。

uiGradients使用場景

• 做網(wǎng)站或 App 的背景、按鈕、導航欄、卡片這些要顯眼的地方；

• 找品牌主色或輔助色，快速試試配色行不行；

• 做幻燈片、海報、社交配圖這些平面設(shè)計時填漸變；

• 學色彩理論時當參考，看看現(xiàn)在流行啥漸變。

uiGradients使用方法（以 Web 為例）

1. 打開uiGradients官網(wǎng)，點擊左側(cè)列表任意漸變，右側(cè)即時預(yù)覽。

2. 右上角選擇 “Copy CSS” 即可得到類似代碼：

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. 粘貼到你的樣式表或行內(nèi) style 中，保存刷新即可看到效果。

uiGradients小技巧

• 想碰運氣找靈感，在網(wǎng)址后面加 #random 就能跳到隨機漸變。

• 手機平板也能用，頁面會跟著屏幕大小調(diào)，直接選了復制代碼就行。

• 和其他配色工具一起用，比如 Color Hunt、Mesh Gradients，能做更復雜的色彩搭配。