? 打开 uigradients 网站主页
首先咱们得打开浏览器，不管你用的是 Chrome、Firefox 还是 Edge，在地址栏输入uigradients.com，敲回车就能进到主页啦。一进去你会发现，页面设计特别简洁，全是各种渐变效果的预览图，花花绿绿的特别好看。这里所有的渐变方案都是免费的，而且不用注册账号，直接就能用，这点真的很方便，不像有些网站非得让你注册才能下载代码。
? 浏览和筛选渐变方案
主页上的渐变方案是默认排列的，如果你有特定的风格需求，可以用页面上方的筛选功能。比如说，你想找冷色调的渐变，就点击 “Filters” 里的 “Cool” 标签；想要适合电商网站的渐变，就选 “E-commerce” 分类。另外，页面右上角还有个搜索框，要是你心里有个大概的颜色方向，比如 “purple to pink”，直接输进去搜索，就能快速找到类似的方案。这里要注意哦，筛选的时候可以多选几个标签，比如同时选 “Dark” 和 “Nature”，就能找到深色系的自然风格渐变。
? 查看单个渐变的详细信息
看到喜欢的渐变效果，直接点击那个预览图，就能进入详情页。这时候你会看到更大的渐变展示，还有对应的 CSS 代码。详情页里除了 CSS 代码，还会显示渐变的颜色值，比如 HEX 格式的色号，要是你需要调整颜色，这些数值就派上用场啦。另外，有些渐变方案下面还会标注适用场景，比如 “适合网页背景” 或者 “适合按钮设计”，这些小提示能帮你更快确定这个渐变适不适合你的项目。
? 复制 CSS 代码
在详情页找到 “CSS” 标签，下面的代码就是你需要的渐变 CSS 啦。这里有两种代码格式，一种是 linear-gradient（线性渐变），另一种是 radial-gradient（径向渐变），网站会根据渐变类型自动生成对应的代码。你只需要点击代码框右边的复制按钮，图标长得像两个重叠的小方块，点一下就能把代码复制到剪贴板里。这时候你去你的网页代码里，把这段 CSS 粘贴到样式表或者元素的 style 属性里，保存一下就能看到效果啦。
? 实用技巧：自定义渐变参数
要是你觉得默认的渐变角度或者颜色分布不太满意，可以自己改改 CSS 代码里的参数。比如说，linear-gradient 后面的第一个值是渐变角度，默认是 135deg（度），你改成 45deg 的话，渐变方向就会变斜。颜色值也能换，比如把 rgba (255,255,255,0.7) 改成 rgba (0,0,255,0.5)，就从透明白色变成半透明蓝色啦。改完之后记得在浏览器里刷新看看效果，不满意就再调整参数，多试几次就能找到你想要的效果啦。
✨ 收藏常用渐变方案
虽然不用注册账号，但你可以把喜欢的渐变方案收藏起来，方便以后用。看到喜欢的渐变，在详情页点击心形图标，这个渐变就会被添加到你的收藏列表里。不过要注意，这个收藏是保存在浏览器本地的，要是你换了浏览器或者清空了缓存，收藏的内容可能就没了。所以建议你要是有常用的渐变，除了收藏，最好也自己保存一份代码到电脑里，这样更保险。
? 移动端使用方法
现在用手机做设计的情况也不少，uigradients 在手机上用起来也很方便。在手机浏览器里打开网站，浏览和筛选渐变的操作和电脑上差不多，点击渐变图进入详情页，复制代码的按钮也很明显。不过手机屏幕小，复制代码的时候注意别选错了区域，要是担心代码复制不全，可以长按代码框，选择 “全选” 再复制。另外，手机端的收藏功能同样能用，操作和电脑端一样，点击心形图标就行。
? 推荐热门渐变方案
给大家推荐几个特别受欢迎的渐变方案，省得你自己慢慢找啦。比如 “Deep Ocean”，是深蓝色到紫色的渐变，特别适合科技感的网站；“Sunset Dream” 是橙色到粉色的渐变，很适合美妆或者时尚类的页面；还有 “Forest Mist”，绿色到灰色的渐变，适合环保或者自然主题的设计。你可以直接在搜索框输入这些名字，就能快速找到对应的方案啦。
? 检查代码兼容性
复制完 CSS 代码之后，最好在不同的浏览器里测试一下，看看显示效果是否一致。虽然 uigradients 生成的代码已经是比较通用的格式，但有些老版本的浏览器可能需要加上前缀，比如 - webkit-linear-gradient 或者 - moz-linear-gradient。要是你发现某个浏览器里渐变显示不正常，可以试着在代码里加上这些前缀，然后再看看效果。
? 常见问题解答
有朋友可能会问，能不能下载渐变的图片格式啊？目前 uigradients 主要提供的是 CSS 代码，不过你要是需要图片，可以用浏览器截图功能，把渐变区域截下来保存成图片。还有人问能不能上传自己的渐变方案，这个网站暂时没有这个功能，不过你可以通过 CSS 代码自己组合颜色，做出独一无二的渐变效果。
最后再提醒大家一下，uigradients 上的渐变方案都是免费供个人和商业使用的，不用 attribution（署名），这点真的很良心。不过使用之前最好还是看一下网站的使用条款，确保符合他们的规定。希望大家都能在这里找到适合自己项目的渐变效果，让设计变得更漂亮！
【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】