CSS 渐变生成器
本地运行，数据不上传服务器
0%
100%
预计画布内存 5.5 MiB
background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%); 使用说明
做网站 Hero 区背景时需要一个漂亮的渐变，用色值手动拼 linear-gradient 容易出错；做 PPT 封面想要渐变底图，不会写 CSS 也没关系；做 App 启动页需要一张渐变背景图片，直接导出 PNG 更方便；设计师和前端协作时，先定好渐变色值再写代码，效率更高。 这个工具生成可复制的 CSS linear-gradient 声明，同时提供实时预览和 PNG 导出。支持 2 到 5 个色标，每个色标的位置可以调整，渐变角度也可以从 0 到 360° 任意设置。颜色按位置自动排序，无需手动排列。 内置夕阳、海洋、森林、极光、霓虹、薄荷六套预设，选一个再微调。PNG 导出宽度和高度在 100 到 8000px 之间可选。适合前端、UI 设计、做演示文稿、需要渐变底图的人。
核心功能
- ✓生成可复制的 CSS linear-gradient 声明
- ✓支持 2 到 5 个色标
- ✓每个色标位置可调
- ✓渐变角度 0 到 360° 可调
- ✓内置夕阳、海洋、森林、极光、霓虹、薄荷六套预设
- ✓实时预览效果
- ✓可导出 PNG 图片，宽高 100 到 8000px
使用教程
网站 Hero 背景：选好色标和角度，复制 CSS 声明直接放进样式表。 PPT 封面底图：调好渐变导出 PNG，放进 PPT 做封面背景。 按钮渐变：两个色标加一个小角度，做出常用的按钮渐变效果。 卡片背景：柔和的多色渐变给卡片增加层次，直接复制 CSS。 快速试用预设：从六套预设里选一个作为起点，再微调色标。
常见问题
Q：支持径向渐变或锥形渐变吗？
A：不支持，工具只生成 linear-gradient 线性渐变。
Q：可以叠加多重渐变吗？
A：不支持，只生成单层线性渐变。
Q：PNG 尺寸有范围吗？
A：单边 100 到 8000px，像素总数上限受设备档位影响。
Q：色标数量可以多几个吗？
A：最多 5 个，常见渐变用 2 到 3 个色标就够了。
Q：颜色顺序需要手动排吗？
A：不需要，工具会按位置自动排序。
Q：数据会上传服务器吗？
A：不会，生成和导出在浏览器本地完成。