CSS 背景图案生成器

工具介绍

CSS 可以完全不依赖图片文件,单靠渐变——radial-gradient() 和 linear-gradient()——画出重复图案:把渐变用作 background-image,再配合一个比元素本身小的 background-size,让渐变以平铺方式重复出现。波点用的是重复的 radial-gradient,条纹和棋盘格用重复或叠加的 linear-gradient(),网格线则用两条互相叠加的 linear-gradient() 直线。

这个工具会帮你生成这些渐变声明。选一种图案类型,调整图案颜色、背景颜色和间距,实时预览会同步更新——然后复制精确的 background-image 和 background-size CSS 代码。

来源:CSS Images Module Level 3, W3C —— 定义了 repeating-linear-gradient() 和 repeating-radial-gradient(),这些图案正是基于这两个函数构建的。

为什么使用它？

• 不需要图片文件,不产生 HTTP 请求——图案是纯 CSS,在任何分辨率下都能立即渲染,包括视网膜/高分屏。
• 颜色和间距完全可调,不用手写渐变语法,也不用自己计算平铺数学。
• 实时预览让你在复制代码之前就能看到精确的重复图案效果。
• 因为是矢量数学计算而不是位图图片,缩放时不会模糊,可以干净地适应各种尺寸。
• 全部在浏览器本地计算,你调整的任何参数都不会上传。
• 免费、不用注册,手机上也能用。

使用方法

1. 选择图案类型:波点、斜条纹、棋盘格或网格线。
2. 选择图案颜色,以及图案形状之间/背后显示的背景颜色。
3. 调整尺寸滑块,让圆点、条纹或网格单元变大或变小——这同时也控制了图案重复的密度。
4. 复制生成的 CSS,粘贴为任意元素的 background-image(以及显示出来的 background-size/background-position)。

示例

输入

图案:波点 · 颜色:蓝色 · 背景:白色 · 尺寸:24px

输出

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

一种经典的浅色波点图案,常用作低调的区块背景或卡片纹理。

每种图案是怎么做出来的

• 波点:一个 radial-gradient() 画出一个填色小圆,再用 background-size 让它以网格方式重复平铺成一片圆点。
• 斜条纹:一个 45 度角的 repeating-linear-gradient() 按固定间隔在图案颜色和背景颜色之间交替。
• 棋盘格:两层 45 度角的 linear-gradient(),互相错开半格,叠加在一起就产生了交替出现的深浅方块。
• 网格线:两条细细的 linear-gradient() 直线——一条水平、一条垂直——按选定的间距平铺,组成一个类似方格纸的网格。

什么时候该用 CSS 图案而不是图片文件

CSS 渐变图案没有文件体积,也不产生 HTTP 请求,所以加载是瞬间完成的,在高分屏上也不会像光栅 PNG 背景平铺图那样显得模糊。它非常适合用作文字背后的低调纹理、区块分隔线、空状态插画或占位卡片。对于复杂的插画或照片类图案,真正的图片文件仍然是正确的选择——CSS 渐变最适合的是像这里这些简单、几何、重复的形状。

配合其他 CSS 效果一起用

图案很适合作为玻璃拟态卡片的背景,因为模糊效果需要背后有视觉纹理才能被看出来。它们也很适合搭配容器元素的圆角一起使用。

→ CSS 玻璃拟态生成器 · 圆角生成器

常见问题