CSS 渐变生成器
选择渐变类型，调整角度和色标，即可复制可直接使用的 CSS 或 Tailwind 任意值。所有修改都会实时反映在预览上。
免费 本地运行 无需注册
预设
色标
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
颜色以十六进制表示，编辑时预览会实时更新。
使用方法
1
选择类型
在线性、径向和锥形之间切换，并设置角度。
2
调整色标
选择颜色、拖动位置，最多可以添加 5 个色标。
3
复制代码
复制 CSS 或 Tailwind 任意值，直接粘贴到项目里。
为什么用它
三种渐变类型
线性、径向和锥形共用一套编辑器和实时预览。
Tailwind 输出
除了 CSS，还能拿到可直接粘贴的 bg-[…] 类名。
预设与随机
没有灵感时可以从预设开始，或随机生成一组配色。
常见问题
哪些浏览器支持锥形渐变？
Chrome、Edge、Firefox 和 Safari 的当前版本都支持 conic-gradient。旧版浏览器会没有背景，建议在下面垫一层纯色。
Tailwind 值怎么用？
把生成的 bg-[…] 类名直接放进 HTML 或 JSX 即可。空格会被替换成下划线，这是 Tailwind 任意值的转义规则。
可以用透明颜色吗？
可以。取色器会写入带 alpha 通道的八位十六进制值，CSS 和 Tailwind 都支持。
径向渐变为什么不能调角度？
径向渐变从中心向四周扩散，没有方向可旋转；角度只对线性和锥形渐变生效。
会上传数据吗？
不会。渐变完全在浏览器内生成，不会发送到服务器。
相关工具
颜色与设计 颜色转换工具 在线转换 HEX、RGB、HSL 和 HSV 颜色值，支持取色器和明暗色阶，方便复制到 CSS 和设计工具中使用。 颜色与设计 对比度检测工具 检测文字颜色与背景颜色的对比度，判断是否满足 WCAG AA 和 AAA 的普通文本与大文本标准，并实时预览效果。 图片工具 图片格式转换工具 在线把 PNG、JPG、WebP 图片互相转换。可选择输出格式和质量，在支持时保留透明通道，转换完成后立即下载，图片不会上传。 开发者工具 Base64 编码解码工具 在浏览器本地进行 Base64 编码与解码，完整支持 UTF-8 中文、emoji 和 URL 安全变体。免费、不上传、无需注册。 文本工具 大小写转换工具 在线转换大写、小写、标题格式、句首大写，以及 camelCase、PascalCase、snake_case、kebab-case 等编程命名格式。 单位换算 日期计算器 在线计算两个日期之间的天数、周数和工作日，也可以按年、月、周、日加减日期，或按出生日期计算年龄。全部在浏览器本地完成。
最后更新: