配色与 CSS 样式工具

受控 CSS 线性渐变生成

只接受 0/90/180 度与校验后的颜色/整数百分比，按固定语法序列化 linear-gradient()，预览与复制文本一致。

在浏览器中运行

输入与参数

• angle — 角度（0 / 90 / 180）
• color0 — 颜色 1
• position0 — 位置 1（0–100 整数）
• color1 — 颜色 2
• position1 — 位置 2（0–100 整数）
• color2 — 颜色 3（可选）
• position2 — 位置 3（可选，整数）
• color3 — 颜色 4（可选）
• position3 — 位置 4（可选，整数）
• color4 — 颜色 5（可选）
• position4 — 位置 5（可选，整数）

真实示例

angle=90, color0=#176b50 @0%, color1=#ffffff @50%, color2=#e8f3ec @100%
→ background-image: linear-gradient(90deg, #176b50 0%, #ffffff 50%, #e8f3ec 100%);

限制与失败处理

仅 0/90/180 度线性渐变、2–5 个 stop、位置为严格递增的 0..100 整数百分比；不支持径向/锥形渐变、重复渐变、 easing stop、CSS 变量或任意原始 CSS。序列化结果长度上限 512 字节。

FAQ