uiGradients

uiGradients 是个给设计师和开发者用的开源渐变色合集，有好多现成的线性和径向渐变。能在线看，也能复制 CSS 代码，还能通过 gradients.json 在代码里调用。很快就能用到网页、App 或者平面设计里。

uiGradients核心特点

• 用着省事：挑好喜欢的渐变，点右上角就能复制代码或者下载图片。

• 支持多种格式：能出 CSS、SCSS、LESS、Stylus、Swift、Android XML 这些格式，不同技术的人直接用就行。

• 大家一起维护：所有渐变存在 GitHub 仓库的 gradients.json 里，谁都能 fork 然后加新配色，PR 过了就能上线。

• 周边东西多：已经有 iOS 扩展、React 组件、SCSS 版本、Handlebars 助手这些相关项目，在各种工程里用起来快。

• 免费还开源：按 MIT 协议来，能商用也能改，只要留原作者版权说明就行。

uiGradients使用场景

• 做网站或 App 的背景、按钮、导航栏、卡片这些要显眼的地方；

• 找品牌主色或辅助色，快速试试配色行不行；

• 做幻灯片、海报、社交配图这些平面设计时填渐变；

• 学色彩理论时当参考，看看现在流行啥渐变。

uiGradients使用方法（以 Web 为例）

1. 打开uiGradients官网，点击左侧列表任意渐变，右侧即时预览。

2. 右上角选择 “Copy CSS” 即可得到类似代码：

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

3. 粘贴到你的样式表或行内 style 中，保存刷新即可看到效果。

uiGradients小技巧

• 想碰运气找灵感，在网址后面加 #random 就能跳到随机渐变。

• 手机平板也能用，页面会跟着屏幕大小调，直接选了复制代码就行。

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