CSS 变量生成器

从设计 Token 生成 CSS 自定义属性。可视化管理颜色、字体排版、间距和圆角，实时生成 :root 代码块。免费，基于浏览器。

在浏览器中处理
数据不离开你的设备
免费 · 无需注册

变量前缀输入 --brand- 等前缀。缺少开头的双连字符时会自动补上；修改前缀会更新全部声明。

编辑 Token

变量名输入变量名。空格会改为连字符，变量名为空的行会跳过。名称区分大小写。值输入任意 CSS 值，包括 var() 或 calc()。值按输入原样复制，重名变量仍按行顺序保留。颜色选择原生颜色或输入三位、六位 HEX 值可同步色块。其他 CSS 颜色值保留当前色块。 + 添加 Token 在四个分组中任意添加空行。填写名称和值后，这行会加入 :root 代码块。删除 Token 删除当前行后 CSS 立即更新。Ctrl/⌘+L 清空文本和 CSS，并保留行和原生颜色。

复制完整的 :root 代码块。复制失败时可重试，或选中 CSS 手动复制。

生成的 CSS

阅读完整使用指南 CSS 变量生成器：在线创建 CSS 自定义属性

示例、说明与常见问题带实际输出的示例、与同类工具的差别，以及常见问题。

生成器输出什么

不管填了多少行，输出永远是一个 :root 代码块，每行 Token 一条声明。顺序按分组（颜色、字体排版、间距、圆角）和组内的行序排列，变量名为空的行直接跳过。值去掉首尾空白后原样写入，工具不检查它是不是合法的 CSS。打开页面时的预填内容，复制出来是这样的：

:root {
  --primary: #3b82f6;
  --secondary: #6366f1;
  --bg: #ffffff;
  --text: #111827;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

默认前缀是 --，所以变量名就是你填的名字本身。把这段粘进全局样式表，组件里写 var(--space-4) 就能取到 16px。

示例一：照 Ant Design 的命名给自己的页面写一组变量

Ant Design 6 输出的 CSS 变量，前缀默认是 ant（定制主题文档里 cssVar.prefix 的默认值），colorPrimary 这类驼峰写法的 Token 写成连字符小写：在 antd 6.6.5 发布的 dist/antd.css 里能看到 --ant-color-primary:#1677ff、--ant-color-primary-hover:#4096ff、--ant-font-size:14px、--ant-border-radius:6px。

如果想让项目里自己写的样式用同一套命名，可以换一个前缀。下面在前缀框里只输入了 app，没写连字符，工具会补成 --app-：

:root {
  --app-color-primary: #1677ff;
  --app-color-primary-hover: #4096ff;
  --app-font-size: 14px;
  --app-border-radius: 6px;
}

为什么不直接用 --ant？同一个文件里，antd 把这些变量写在 .css-var-… 这样的类选择器上，而不是 :root。自定义属性按继承取值，离元素最近的祖先说了算，所以你在 :root 里写同名变量，antd 组件内部仍然读到它自己那一层的值，看起来像“改了没生效”。要改 antd 组件的颜色，应当用 ConfigProvider 的 theme；这个生成器适合给 antd 之外的页面样式补一组变量。

示例二：变量引用变量，名称里写中文

值框里可以直接写 var()，工具原样复制。下面让链接色跟随主色，再加一行中文名称：

:root {
  --app-color-primary: #1677ff;
  --app-color-link: var(--app-color-primary);
  --app-品牌-辅助色: #13c2c2;
}

以后只改 --app-color-primary，链接色会一起变。中文写进变量名是合法的：CSS Syntax Level 3 把 U+3001 到 U+D7FF 之间的字符都列为可用于标识符的非 ASCII 字符，常用汉字都在这个范围里。名称中间的空格被换成了连字符，因为带空格的名称会让整条声明无效。用中文输入法时常会打出全角空格（U+3000），工具同样把它当作空格换成连字符，所以 品牌　辅助色 也会得到 --app-品牌-辅助色。不过团队里别人手写 var(--app-品牌辅助色) 时少了连字符就读不到，名称最好事先约定。

限制

只输出一个 :root 代码块。暗色主题、媒体查询、@property 注册、JSON 或 Sass 变量都不生成，需要的话复制后自己再写一块，例如在 @media (prefers-color-scheme: dark) 里重新声明 --bg 和 --text。
四个分组是固定的，只能在组内增删行。
不校验值。两行同名会同时输出，按 CSS 规则后一条生效。
变量名区分大小写：var(--Primary) 读不到 --primary。
var() 的后备值只在变量未定义时使用。如果写了 --gap: red，padding: var(--gap, 8px) 不会退回 8px，而是在计算值阶段失效，padding 取初始值 0（CSS Custom Properties Level 1 §3.1）。
颜色选择器只跟随三位或六位的 HEX 值；写 rgb() 或 oklch() 也能正确复制，只是色块不变。
在工具内按 Ctrl/⌘+L 会把前缀、变量名和值都清空，行本身和颜色选择器里的颜色保留。

自定义属性和 var() 从 Chrome 49、Firefox 31、Safari 9.1、Edge 15 起可用（MDN 浏览器兼容数据）。要给某个颜色生成整套深浅色阶，可以用颜色色阶生成器；需要随视口变化的尺寸，可以从 CSS Clamp 计算器复制值填进来。

FAQ

什么是 CSS 自定义属性（CSS 变量）？

CSS 自定义属性（又称 CSS 变量）是名称以两个连字符开头的属性，如 --primary-color: #3b82f6。写在 :root 上时，页面里所有元素都会继承它，用 var(--primary-color) 读取，改一处，所有引用它的地方一起变。

变量前缀是什么，如何修改？

前缀是加在每个变量名前面的字符串，默认为 '--'，生成 --primary 这样的名称。改成 '--brand' 或 '--brand-' 可以给变量加命名空间（缺少结尾的连字符时工具会补上）。前缀没写开头的两个连字符也没关系：输入 'app' 会得到 --app-primary，因为自定义属性名必须以 -- 开头。

如何添加新的设计 Token？

点击任意分组（颜色、字体排版、间距、圆角）内的「+ 添加 Token」按钮，填写变量名和值。颜色 Token 还提供颜色选择器，CSS 输出实时更新。

如何删除不需要的 Token？

点击 Token 行末尾的 × 按钮即可删除，CSS 输出立即更新。

如何在项目中使用生成的 CSS？

点击「复制」按钮复制 :root 代码块，粘贴到全局样式文件（如 styles/global.css）中，在组件 CSS 中通过 var(--token-name) 引用任意 Token。

我填的变量名和值会被发送或保存吗？

不会。CSS 在浏览器标签页里生成，变量名、值和前缀不会发送到服务器，也不会写入浏览器存储，所以刷新页面后回到预填的行。页面统计只记录使用事件（工具名和动作：生成、添加 Token、复制），不包含你输入的内容。