生成 CSS 自定义属性，支持可视化预览。创建颜色、间距和字体变量，实时预览并导出为 CSS。
开发者工具
关于此工具
CSS 变量生成器帮助您通过可视化编辑器创建和管理 CSS 自定义属性。它提供 浅色、深色 和 蓝色 等现成主题模板，设计系统实时预览，颜色值自动拾色器集成，以及一键导出为 CSS 文件。
主要功能
- 预置 浅色、深色 和 蓝色 主题模板
- 实时预览面板，展示设计系统效果
- 颜色变量值自动拾色器
- 自由添加、编辑和删除自定义变量
- 一键复制 CSS 或下载为 .css 文件
- 预览中可视化颜色和间距变量
使用场景
- 使用 CSS 自定义属性创建一致的设计系统
- 在代码实现之前原型化主题变体
- 生成深色模式和浅色模式变量集
- 导出可直接使用的 CSS 变量文件到项目中
- 可视化颜色和间距变量如何影响 UI 组件
css
variables
generator
常见问题
有哪些模板可用？
工具提供 浅色、深色 和 蓝色 主题模板，包含预配置的颜色、间距、字体和圆角变量。您也可以使用 自定义 模板从零开始创建。
可以添加自定义变量吗？
可以，您可以通过添加变量按钮添加任意数量的自定义变量。每个变量都有名称和值字段，颜色值会自动提供拾色器和预览色块。
实时预览是如何工作的？
实时预览面板使用您的 CSS 变量实时渲染示例 UI。它展示使用变量样式的按钮、卡片和色块，让您在导出前就能看到设计系统的效果。
如何导出生成的 CSS？
您可以一键复制生成的 CSS 到剪贴板，或下载为 .css 文件。输出是标准的 :root 代码块，包含所有自定义属性，可直接在任何项目中使用。
可以创建哪些类型的变量？
您可以创建任何 CSS 自定义属性，包括颜色、间距值、字体族、字号、圆角等。颜色值会被自动检测并提供拾色器以便选择。