CSS 背景图案生成器
用条纹、圆点、网格或棋盘格构建轻量 CSS 背景，实时查看并复制声明。
为背景上的文字选择清晰可辨的对比度。
用于斜条纹；其他图案仅在适用时将此值保留在生成的 CSS 中。
预览
预览使用当前浏览器支持的 CSS 渐变。旧浏览器或打印时外观可能不同；不要仅依靠颜色图案传达信息。
使用步骤
如何使用
- 选择条纹、圆点、网格或棋盘格，并设置前景色和底色。
- 调整平铺尺寸、线条或圆点大小；适用时调整条纹角度并查看预览。
- 复制 CSS 并将其应用到样式表中的元素。
四种本地 CSS 渐变图案
条纹使用 repeating-linear-gradient，圆点使用 radial-gradient，网格组合两个线性渐变，棋盘格使用 conic-gradient。预览和声明都在页面生成，不下载图像、不调用服务器或第三方包。图案由标准 CSS 渐变原创组合而成。
预览与浏览器差异
平铺尺寸控制圆点、网格和棋盘格的重复区域；细节尺寸控制条纹宽度、圆点半径或网格线宽；角度只作用于条纹。现代浏览器支持这些渐变，但抗锯齿和打印效果会有差异。预览仅供装饰；应确保对比度，重要信息不能只靠颜色传达。
常见问题
你可能还想知道
会创建图像文件吗？
不会。它生成在浏览器中直接绘制可重复背景的 CSS 声明。将 CSS 复制到自己的样式表或样式编辑器。
为什么不同浏览器中的图案略有不同？
浏览器对渐变的抗锯齿方式可能不同，尤其是平铺较小或边缘倾斜时。颜色、声明尺寸和渐变指令保持不变。
预览本身可访问吗？
预览有可访问文本标签，但纯视觉图案应保持装饰性。重要信息还应通过文本、标签或其他非颜色提示表达。