CSS 图案生成器

Q: 可以使用透明背景吗？

可以，在“背景色”中输入 `transparent`，或带 alpha 的 rgba()/oklch() 颜色。

创建纯 CSS 背景图案：圆点、波尔卡圆点、条纹、棋盘格、网格、锯齿和十字网格，可设置颜色、图块大小和粗细，无需图片。

图案设置

图案

图案颜色

背景色

图块大小px

圆点半径px

预览

CSS 代码

background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

什么是 CSS 图案生成器？

只用 CSS 渐变生成重复的背景图案，因此不需要任何图片文件。选择图案、两种颜色、图块大小以及线条或圆点的粗细，然后复制生成的 background 声明。

如何使用 CSS 图案生成器

选择“图案”：圆点、波尔卡圆点、条纹、棋盘格、网格、锯齿或十字网格。
设置“图案颜色”和“背景色”。
调整“图块大小”和粗细（圆点半径、条纹宽度或线宽），对于条纹还可调整“角度”。
查看预览。
复制 CSS 代码。

示例

输入

Checkerboard, tile 40px, pattern #000000 on #ffffff

输出

background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

何时使用 CSS 图案生成器

适合细腻的页面背景、占位图、方格纸效果和装饰性区块；它们可完美缩放，且不产生 HTTP 请求。对于复杂或带插画的重复图案，SVG 图块更灵活。

CSS 图案生成器的工作原理

每个图案都是一个 background-color 加上由 background-size 重复的一个或多个渐变。圆点使用 radial-gradient(color r, transparent r)；波尔卡圆点通过 background-position 增加第二个偏移层。条纹使用带硬色标的 repeating-linear-gradient；棋盘格使用 repeating-conic-gradient(color 0% 25%, transparent 0% 50%)；网格结合一个水平和一个垂直的线性渐变；锯齿由四个 45° 三角形构成。粗细被限制在图块大小之内。