追风工具箱

CSS 渐变生成器

线性 / 径向 / 圆锥 · 实时预览

CSS 渐变生成器

135°

色标

预设

常见问题

三种渐变有什么区别?
linear-gradient(线性):颜色沿一条直线方向过渡,最常用。角度 0deg 是从下往上,90deg 是从左往右。
radial-gradient(径向):从中心向外扩散,适合做光晕、按钮高光。
conic-gradient(圆锥):绕中心旋转过渡,适合做色轮、进度环、饼图。
色标的位置百分比是什么意思?
表示这个颜色在渐变线上的位置。0% 是起点,100% 是终点。如果两个色标位置相同(如 red 50%, blue 50%),会形成硬边分界而不是平滑过渡——这是做条纹图案的技巧。
渐变代码可以兼容老浏览器吗?
现代浏览器(Chrome 26+、Firefox 16+、Safari 6.1+、Edge)都原生支持标准写法,不需要加 -webkit- 前缀。
唯一要注意的是 conic-gradient 较新(Chrome 69+、Safari 12.1+),如果要兼容 IE 或很老的浏览器,需要降级为纯色。
怎么做出彩虹色这样的多色渐变?
点「+ 添加色标」增加颜色,最多 6 个。做彩虹就依次加红、橙、黄、绿、蓝、紫,位置均匀分布(0/20/40/60/80/100)。也可以直接点下方的预设快速套用。

使用说明

  1. 选渐变类型(线性/径向/圆锥)
  2. 拖动角度滑块或调整色标的颜色和位置
  3. 实时预览上方效果
  4. 点「复制 CSS」直接粘贴到你的样式表

做按钮、卡片、背景时想调个好看的渐变、或者看到别人的设计想快速复现类似的颜色过渡。

免责声明

本工具的编解码与格式化处理全部在你的浏览器本地完成,输入内容不会被上传、存储或转发到任何服务器。但请注意:Base64 等编码方式并非加密手段,不可用于保护密码、密钥等敏感信息。工具结果仅供参考,在涉及生产环境、资金交易、法律文书等关键场景时,请务必用官方工具二次校验。本工具为免费公益项目,按「现状」提供,不对因使用本工具产生的任何直接或间接损失承担责任。