CSS 生成器
可视化选色 · 字体边距设置 · 一键生成 CSS · 实时预览
在调色板点击颜色格子选中颜色，再点击下方属性区对应的输入框即可赋值。所有属性设置完成后点击「生成 CSS 代码」按钮，效果区会实时预览，下方输出 CSS 源码。
CSS 属性设置
调色板
当前颜色：
#FFFFFF
｜赋值给 →
未选择
属性区
背景颜色
文本颜色
链接颜色
悬停链接
活动链接
已访问链接
字体
宋体
verdana, sans-serif
arial, sans-serif
courier, sans-serif
tahoma, sans-serif
georgia, serif
'Times New Roman', serif
字体大小
px
em
pt
rem
%
上边距
px
em
pt
rem
%
左边距
px
em
pt
rem
%
右边距
px
em
pt
rem
%
下边距
px
em
pt
rem
%
生成 CSS 代码
复制代码
重置
效果预览
文本颜色
链接颜色
活动链接颜色
已访问链接颜色
你可以在调色板中选择你想要的颜色，效果区会给出相应的预览。也可以手工输入颜色值以及其它各项属性。
提示：悬停链接可预览悬停颜色，点击链接可预览活动颜色
生成的 CSS 代码
先点击调色板选色 → 再点击属性框赋值 → 最后点「生成 CSS 代码」
使用说明
选择颜色
：点击调色板中的任意颜色格子，该颜色会变为「当前颜色」
赋值颜色
：点击属性区中对应的输入框（如「背景颜色」「文本颜色」），当前颜色会自动填入
设置属性
：选择字体、字体大小、四个方向的边距，支持 px/em/pt/rem/% 五种单位
生成代码
：点击「生成 CSS 代码」按钮，效果区会实时预览，下方输出完整 CSS
复制使用
：点击「复制代码」按钮，将 CSS 粘贴到你的网页
<style>
标签或 .css 文件中
重置
：点击「重置」按钮恢复所有属性为默认值
预览交互
：效果区的链接可悬停/点击，预览不同状态的链接颜色
收藏
便民
工具箱
收录
我的