无需登录 数据私有 本地保存

CSS渐变解析器 - 从代码分离色标

11
0
0
0

CSS渐变解析器

从CSS渐变代码中分离并提取所有色标

粘贴CSS渐变代码

粘贴CSS渐变代码并点击「解析色标」

支持 linear-gradient、radial-gradient、conic-gradient 及其 repeating 变体

常见问题与知识点

什么是CSS渐变中的色标（Color Stop）？
色标是CSS渐变中定义颜色变化的关键元素。每个色标由颜色值和可选的位置参数组成。例如 #ff0000 30% 表示在渐变30%位置处颜色为红色。浏览器会根据色标自动计算中间颜色的过渡。如果省略位置，浏览器会自动均匀分布色标。
支持哪些CSS渐变类型？
本工具支持所有主流CSS渐变类型：linear-gradient（线性渐变）、radial-gradient（径向渐变）、conic-gradient（锥形/圆锥渐变），以及它们的 repeating-* 变体（重复渐变）。支持的CSS颜色格式包括：十六进制（#fff、#ff0000）、rgb()、rgba()、hsl()、hsla()、hwb()、命名颜色（red、transparent等）。
色标位置可以使用哪些单位？
色标位置支持百分比（如 50%）、像素（如 200px）、em/rem等相对单位。百分比是最常用的方式，表示在渐变轴上的相对位置。如果色标未指定位置，浏览器会将其均匀分布在相邻的有位置色标之间，首尾色标默认分别为0%和100%。
如何处理带有透明度的渐变？
使用 rgba() 或 hsla() 格式可以为色标指定透明度（Alpha通道）。例如 rgba(255,0,0,0.5) 30% 表示在30%位置处有一个半透明的红色。也支持十六进制透明度表示法如 #ff000080（8位hex，末尾两位为透明度）。本工具会正确解析这些格式并在预览中展示透明效果（使用棋盘格背景）。
什么是颜色提示（Color Hint）？
颜色提示是在两个色标之间插入的纯位置值（不带颜色），用于调整颜色过渡的中点。例如 red 10%, 30%, blue 90% 中的30%就是颜色提示，它指示从红色到蓝色的过渡在30%处到达中点。颜色提示能让渐变过渡更加细腻可控。
解析出的色标可以如何使用？
解析出的色标可以用于：①调整渐变效果——修改位置或颜色后重新组合；②学习参考——分析优秀渐变作品的色标配置；③代码迁移——将CSS渐变转换为其他格式（如Canvas渐变、SVG渐变）；④设计系统——提取品牌渐变色标作为设计Token。点击任意色标卡片上的复制按钮即可获取颜色值。
🔧 相关工具