🔳
CSS 背景图案
用纯 CSS 渐变生成条纹、棋盘、圆点等几何背景图案，无需图片。
本地处理 · 不上传
加载工具中…
相关：图案 · pattern · 背景 · 条纹 · 棋盘 · css
CSS 背景图案用纯渐变生成条纹、格子、圆点、棋盘等重复图案，无需图片文件，可调尺寸、角度与配色。相比背景图片，它没有额外请求、缩放不失真，颜色还能跟着主题变量走。
使用步骤
- 选择图案类型
- 调整尺寸、角度与颜色
- 预览平铺效果
- 复制生成的 CSS
使用场景
- 为区块添加纹理背景
- 制作占位或加载状态的条纹
- 做卡片的装饰底纹
- 替代小图片减少请求
小贴士
- 原理是用 repeating-linear-gradient 之类的重复渐变加上硬色标，让颜色不过渡而是直接切换，从而形成清晰的图案边界。
- 纯 CSS 图案没有请求开销、可无损缩放、颜色可用变量控制，这三点是它优于背景图片的地方。
- 图案作为内容背景时要压低对比度，纹理太抢眼会严重影响上面文字的可读性。
常见问题
和用图片有什么区别？
不需要额外请求、任意缩放不失真、颜色可以用 CSS 变量动态改。代价是复杂图案的代码会变得难读，且不适合做写实纹理。
怎么让图案不模糊？
关键是色标要用硬边界（同一位置写两个颜色）而非渐变过渡。若边缘仍有毛刺，检查图案尺寸是否为整数像素。
性能有影响吗？
重复渐变的绘制成本很低，大面积使用也没问题。但要避免给它加动画，渐变的重绘比 transform 昂贵得多。
CSS 背景图案是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 背景图案，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。