CSS 背景图案生成器

CSS 只用渐变就能画出重复的背景图案：硬色标会把渐变变成条纹，background-size 则把一个图块铺满整个元素。结果在任何缩放比例下都很清晰，无需下载，改一个值就能换颜色。这个生成器可写出十种无缝图案——任意角度的条纹、波点、点阵、棋盘格、网格线、方格纸、交叉线、锯齿、菱形和半方形三角形，在浏览器中预览 CSS，同时提供 SVG 版本。

使用方法

1. 选择一种图案。
2. 设置图案颜色和背景颜色。
3. 设置图块大小，以及条纹宽度、线条粗细或圆点大小（条纹还要设置角度）。
4. 复制 CSS，或下载 SVG 图案用于设计工具。

计算公式

stripes: repeating-linear-gradient(angle, color 0 w, transparent w s) · dots: radial-gradient(circle, color r, transparent r + 1px) with background-size s s · grid: linear-gradient(color t, transparent t) across and down

s 是图块大小，w 是条纹宽度，r 是圆点大小的一半，t 是线条粗细。两个位置相同的色标会形成硬边，而不是渐隐。锯齿和菱形图案使用四个 45° 渐变，每个渐变在图块的一个角上画一个三角形。

示例

默认值——45° 条纹、#eff6ff 上的 #2563eb、每 24 px 一条 8 px 宽——得到 background-image: repeating-linear-gradient(45deg, #2563eb 0 8px, transparent 8px 24px);。40 px 的棋盘格是一个圆锥渐变：conic-gradient(#2563eb 90deg, transparent 90deg 180deg, #2563eb 180deg 270deg, transparent 270deg) 配合 background-size: 40px 40px，得到 20 px 的方块。