CSS 生成器

可视化选择颜色、字体、边距 → 一键生成 CSS 代码 → 实时预览效果
首页  >  项目中心  >  CSS生成器    收藏本页
在调色板点击颜色格子选中颜色，再点击下方属性区对应的输入框即可赋值。 所有属性设置完成后点击「生成 CSS 代码」按钮，右侧效果区会实时预览，下方输出 CSS 源码。

CSS 属性设置

调色板
当前颜色：#FFFFFF ｜点击属性框赋值给 → 未选择
属性区
背景颜色
文本颜色
链接颜色
悬停链接
活动链接
已访问链接
字体
字体大小
上边距
左边距
右边距
下边距
效果预览

文本颜色

你可以在调色板中选择你想要的颜色，效果区会给出相应的预览。 也可以手工输入颜色值以及其它各项属性。

提示：鼠标悬停在链接上可预览悬停颜色，点击链接可预览活动颜色
生成的 CSS 代码
先点击调色板选色 → 再点击属性框赋值 → 最后点「生成 CSS 代码」

使用说明

  1. 选择颜色：点击左侧调色板中的任意颜色格子，该颜色会变为「当前颜色」
  2. 赋值颜色：点击属性区中对应的输入框（如「背景颜色」「文本颜色」），当前颜色会自动填入
  3. 设置属性：选择字体、字体大小、四个方向的边距，支持 px/em/pt/rem/% 五种单位
  4. 生成代码：点击「生成 CSS 代码」按钮，右侧效果区会实时预览，下方输出完整 CSS
  5. 复制使用：点击「复制代码」按钮，将 CSS 粘贴到你的网页 <style> 标签或 .css 文件中
  6. 重置：点击「重置」按钮恢复所有属性为默认值
  7. 预览交互：右侧效果区的链接可悬停/点击，预览不同状态的链接颜色