背景画布生成器
快速生成网页背景图案，支持纯色、渐变、网格、点阵、斜线等多种风格，复制 CSS 代码直接使用。
实时预览 / Live Preview
Preview Text
CSS 代码
background: linear-gradient(135deg, #6366f1, #ec4899);How to Use
- 从图案选择器中选择背景类型：纯色、线性渐变、径向渐变、圆点、网格、斜线或棋盘格。每种类型都有各自的参数控件。
- 调整主色和辅色、间距（图案大小）以及渐变角度，实时预览随参数变化即时更新，反复试验直到满意为止。
- 点击复制 CSS 一键复制生成的 CSS 代码。所有图案均为纯 CSS 实现（linear-gradient、radial-gradient），无需任何图片文件。
Frequently Asked Questions
- 这些背景图案使用了图片吗？
- 没有——所有图案均使用纯 CSS 生成（linear-gradient、radial-gradient、repeating-gradient），零 HTTP 请求，即时渲染，任意分辨率下无损缩放。非常适合对性能敏感的网站。
- 可以在背景上叠加遮罩吗？
- 可以——在生成的背景上叠加半透明遮罩色或渐变即可。生成器提供图案在浅色和深色背景下的预览，方便你规划内容层的设计。
- CSS 背景图案是响应式的吗？
- 完全是。由于图案通过 CSS 定义而非固定尺寸图片，可以平滑缩放至任意视口宽度。你可以调整 background-size 值，在移动端显示更密集的图案，在桌面端显示更稀疏的效果。