CSS 背景图案生成器

使用纯 CSS 生成点、网格、条纹和棋盘格等 CSS 背景图案。

Background Color

Pattern Color

Size: 20px

Opacity: 100%

Preview

CSS Code

background-color: #1a1a2e;
background-image: radial-gradient(#3b82f6 1px, transparent 1px);
background-size: 20px 20px;

CSS 背景图案 - 技术详情

CSS 背景图案使用渐变和 background-size 创建无需图片的重复图案。径向渐变创建点，线性渐变创建条纹和网格。多个背景可以叠加以实现复杂效果。纯 CSS 图案轻量且缩放完美。

.dots {\n  background: radial-gradient(circle, #000 1px, transparent 1px);\n  background-size: 20px 20px;\n}