浏览器本地处理
无需登录
实时预览
生成器可视化调整参数，实时生成 CSS 渐变代码
参数
类型
角度90°
色标（2）
0%
100%
预览
CSS 代码
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
至少 2 个色标 · 拖动滑块调整位置与角度浏览器本地生成 · 不上传数据
工具说明CSS
简介
可视化调整线性、径向、锥形三种渐变的角度、形状、大小和色标（颜色与位置），实时预览效果并生成对应的 CSS background 声明，内置 6 个常用预设可以一键加载作为起点。所有处理都在浏览器本地完成，数据不会离开你的设备。
场景
为按钮、卡片、背景快速生成渐变样式预览不同角度和色标组合的实际效果把设计稿里的渐变还原成可用的 CSS 代码学习 linear-gradient / radial-gradient / conic-gradient 语法
使用步骤
123
选择类型或预设调整参数与色标复制 CSS 代码