渐变生成器
使用交互式颜色选择器创建漂亮的CSS渐变，实时预览渐变效果。
设计工具 · ToolBox
工具介绍
想让页面背景、按钮或横幅更有质感，渐变是常用手段，但手写 gradient 语法既难记又难调。这个渐变生成器通过交互式取色器选择起止颜色、调整渐变方向和色标位置，实时预览效果，满意后复制 CSS 代码即可使用。适合前端开发、设计师，以及需要快速出背景方案的运营人员。
使用步骤
- 打开页面，选择渐变类型（线性渐变或径向渐变）
- 用取色器挑选颜色，拖动色标调整过渡位置
- 调整渐变角度或方向，在预览区观察效果
- 复制生成的 gradient 代码，粘贴到 CSS 中使用
常见问题
支持几种颜色的渐变？
可以在渐变条上增加多个色标实现多色过渡，一般 2-4 个颜色的视觉效果最干净；色标过多容易显得杂乱。
生成的代码能直接用在项目里吗？
可以，输出的是标准 CSS linear-gradient 或 radial-gradient 语法，现代浏览器均支持，直接赋值给 background 属性即可。
能和阴影生成器搭配使用吗？
完全可以，渐变负责底色质感、阴影负责层次深度，两者搭配常用于卡片和按钮设计，分别复制代码合并到同一样式中即可。