格子岛

CSS 渐变生成器

可视化设计线性渐变，一键复制 CSS。

报告问题

Advertisement

A使用方法

  1. 01 选择两个颜色。
  2. 02 选择方向预设，或直接输入精确角度（0–360°）。
  3. 03 复制生成的 CSS 代码。

Q常见问题

角度是什么意思？ ＋

90deg 指向右，180deg 向下——角度从下向上方向起顺时针计算，调节它可获得斜向渐变。

支持两个以上的颜色吗？ ＋

CSS 语法本身支持任意多个色标；可视化编辑器覆盖最常见的双色场景，复制出的代码可手动扩展。

→相关工具

→ 颜色转换器 HEX、RGB、HSL 互转，附明暗色阶色板。 → 对比度检查器 检查文字与背景色是否达到 WCAG AA/AAA 标准。 → 年龄计算器 按年、月、日精确计算年龄，并显示距离下一个生日的天数。 → Base64 编解码 文本与 Base64 互转，完整支持 UTF-8 中文与 emoji。