CSS 背景图案生成
32 种纯 CSS 背景图案：条纹、圆点、网格、棋盘、之字形、波浪、蜂窝等，可实时调整颜色、尺寸与透明度，一键复制 CSS。
免费浏览器本地运行无需注册
图案
参数
背景色
图案色
配色预设
图案尺寸 24px
线宽 2px
图案不透明度 100%
角度 45°
—
CSS
相关工具
怎么用 CSS 背景图案生成器
- 在图案库里挑一个图案 —— 全部用渐变绘制，不含图片，也不会产生额外请求。
- 调整背景色、图案色、图案尺寸、线宽、不透明度和角度，右侧大图会实时更新。
- 复制 CSS 贴到任意元素上，整个图案只需要一条
background声明。
常见问题
为什么用 CSS 而不用 PNG？
渐变图案只有几百字节 CSS，在任何屏幕密度下都清晰，不产生 HTTP 请求，而且改一个颜色值或 CSS 变量就能整体换色。
图案会跟着页面滚动吗？
默认会。想固定可以加 background-attachment: fixed；另外注意大尺寸图案铺满整页时，在低端手机上会有一点绘制开销。
怎么让图案变淡或放到内容后面？
可以直接在这里调低图案不透明度，或者把图案放到 ::before 伪元素上，配合 position: absolute; inset: 0; z-index: -1;，这样正文仍然完全不透明。