CSS Gradient

由Alex Sirota开发的Photoshop风格CSS渐变编辑器，支持线性、径向、对角和重复渐变，可生成兼容IE6至最新浏览器的CSS代码，并提供从图片或CSS导入渐变的逆向功能。

核心编辑与预览功能

编辑器采用类似Photoshop的渐变条控制：拖拽色标调整位置，双击修改颜色，上下拖拽删除色标，在色标间点击添加新色标。右侧预览面板支持水平、垂直、对角和径向四种方向，并可拖拽角点自由调整预览尺寸。调整面板可对当前渐变整体调节色相、饱和度和明度，或一键反转渐变方向。

• 色标独立控制：每个色标可分别设置颜色（支持hex/rgb/rgba/hsl/hsla）和位置百分比，不透明度色标与颜色色标完全独立，可任意位置添加多个不透明度节点
• 导入导出：支持从CSS代码导入（兼容Mozilla/Webkit/Opera/W3C/IE格式），也可上传PNG/JPG图片自动识别并转换为CSS渐变，转换算法支持透明通道
• 预设系统：内置135+预设渐变（含Web 2.0渐变集），用户可保存自定义预设并跨会话持久化，右键菜单可删除已保存预设

跨浏览器兼容性面板

工具提供详细的浏览器兼容矩阵，按版本列出各浏览器对渐变的支持情况和使用统计。默认生成无前缀的W3C标准语法，开启「大型化兼容」模式后自动添加各浏览器前缀（-webkit-/-moz-/-o-）以及IE6-8的滤镜语法和IE9的SVG渐变回退方案。

• IE9 SVG回退：自动为IE9生成SVG渐变代码，需在HTML中添加override样式和gradient类名
• 浏览器统计：面板显示每个浏览器版本的用户占比，例如IE6-8滤镜语法使用率0.03%，帮助开发者决策兼容范围
• 输出格式：支持切换为Sass/SCSS（需Compass mixins），以及IE10+、新版Webkit、Opera 11.10+等格式

分享与协作

每个渐变生成后自动获得永久链接（permalink），可用于保存、分享或嵌入文档。CSS面板支持一键复制到剪贴板，双击CSS文本可全选。可切换CSS注释的显示/隐藏，便于团队协作时标注。

• 跨会话持久化：渐变方向、预览尺寸、输出颜色格式等设置自动保存，下次打开保持上次状态
• 键盘快捷键：在色标位置输入框中按上下方向键可微调数值
• 社交分享：支持Tweet和StumbleUpon一键分享

常见问题

Q1：CSS Gradient Editor生成的代码如何兼容IE9？

A1：在兼容性面板中勾选「IE9 support」，工具会自动生成SVG渐变代码。你需要给所有应用渐变的元素添加class="gradient"，并在HTML中添加一段override样式，具体代码会显示在工具面板中。

Q2：能否将图片中的渐变转换为CSS代码？

A2：可以。点击「Import from image」按钮，上传PNG/JPG图片或输入图片URL，工具会分析图片并提取渐变颜色和位置，转换为CSS gradient代码，支持透明通道和复杂多色渐变。

Q3：如何保存自己调好的渐变以便下次使用？

A3：在预设面板中点击「save」，输入名称后点击「new」即可保存。预设会存储在浏览器本地，跨会话保留。右键点击已保存的预设可删除。

更多同类工具与网站,可在在线编程分类继续挑选。

信息核实于 2026年7月,具体以官网为准。