设计 / CSS

CSS图案生成器（条纹、圆点、网格、棋盘格）

仅使用CSS渐变构建重复背景图案：条纹、斜条纹、网格线、波点、棋盘格和锯齿图案。你可以自定义两种颜色、尺寸和线宽，并复制CSS。

CSS图案生成器（条纹、圆点、网格、棋盘格）: 每种图案都由一个或两个CSS渐变组成，并按你选择的尺寸重复：条纹使用repeating-linear-gradient，网格使用两个交叉的linear-gradient，圆点使用radial-gradient，棋盘格使用repeating-conic-gradient。由于没有图片文件，图案在任意缩放比例下都能保持清晰，而且无需产生加载成本。 完全在浏览器中本地运行，文件不会上传到服务器。

类别
开发者工具
使用次数
在浏览器中
费用
免费·无需注册
可用性
可直接使用
CSS图案生成器本地处理

完全在浏览器中运行

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

每种图案都只使用CSS渐变绘制，因此无需下载图片，在任何缩放比例下都能保持清晰，还可以在样式表中更改颜色。文字背后的图案应保持低调：两种颜色之间的低对比度有助于保持文字清晰易读。

棋盘格的绘制方式

repeating-conic-gradient(#000 0 25%, transparent 0 50%)会在每个图块中心周围绘制一圈中的第一个和第三个四分之一部分，从而在每个图块中形成两个对角方格；background-size会将图块设置为方格大小的两倍。

组合图案

背景图片会叠加：在图案后面列出来自CSS渐变生成器的渐变，并用逗号分隔，这样图案就会位于渐变之上。

使用方法

  1. 选择一种图案。
  2. 选择两种颜色、重复尺寸，以及线宽或圆点大小。
  3. 复制CSS。

隐私与限制

所有操作都在你的浏览器中运行。

相关工具

CSS渐变SVG波浪Glassmorphism

常见问题

这些图案能在所有浏览器中使用吗？

可以：所有当前主流浏览器都支持这些渐变，包括棋盘格所使用的圆锥渐变。

如何在文本后面放置图案？

选择两种接近的颜色，让图案保持低调，同时确保文本具有足够的对比度。

可以更改条纹的角度吗？

可以：在复制的CSS中编辑repeating-linear-gradient里的角度，例如将45deg改为60deg。

免费工具·使用在浏览器中次·无需账户