渐变实验室 - 创意实验 · 萤炬工具箱

渐变实验室策展了上百款 CSS 渐变方案，都是可以直接拿去用的成品：点一下复制样式代码，也能全屏预览看它铺满整个屏幕是什么效果，另外提供参考 PNG 便于放进设计稿比对。省掉自己反复调角度和色标的过程，做页面背景、卡片装饰、按钮质感时挑一个就走。百余款 CSS 渐变策展，可复制样式、全屏预览、下载参考 PNG。

渐变实验室策展了上百款 CSS 渐变方案，都是可以直接拿去用的成品：点一下复制样式代码，也能全屏预览看它铺满整个屏幕是什么效果，另外提供参考 PNG 便于放进设计稿比对。省掉自己反复调角度和色标的过程，做页面背景、卡片装饰、按钮质感时挑一个就走。

使用步骤

1. 浏览渐变列表，看中的先点全屏预览确认铺开后的观感。
2. 确认后复制 CSS 样式，拿到的是可以直接粘进样式表的写法。
3. 需要在设计稿里比对就用参考 PNG。
4. 粘进项目后可以微调角度和色标做二次适配。

功能与限制

• 百余款 CSS 渐变策展，可复制样式、全屏预览、下载参考 PNG。
• 建议先全屏预览再使用，小面积与大面积观感差异明显。

常见问题

为什么小卡片上好看，铺满整屏就不对了？

渐变的观感和面积强相关。小面积上柔和的过渡在大面积下会显得脏或色带明显，所以建议先全屏预览再决定，这也是这一页提供全屏预览的原因。

复制的样式在旧浏览器上能用吗？

linear-gradient 与 radial-gradient 在现代浏览器里支持良好。非常老旧的环境可能需要加前缀或准备一个纯色兜底背景。

可以在自己的项目里用吗？

CSS 渐变是通用样式写法与色值组合，正常用在自己项目里没问题。

能自己调参数吗？

这一页定位是策展现成方案，复制到项目后按需改角度、色标位置和透明度即可。