图案参数
默认点状图案已生成。
平铺预览
.pattern-background {
background-color: #F6F9FE;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23F6F9FE%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%224%22%20fill%3D%22%23136CE9%22%2F%3E%3C%2Fsvg%3E");
background-size: 48px 48px;
}
预览区域显示重复后的效果；请留意边缘是否连续，以及颜色和页面内容的对比度。
无缝图案生成
选择点、线、网格或几何图形，设置间距、角度、颜色与透明背景，预览平铺衔接效果，导出 SVG、PNG 或 CSS 背景，方便制作纹理和重复图案。
使用说明
三步完成操作
- 01 · 选择图案
从点、线、网格和基础几何图形开始。
- 02 · 检查平铺
调整单元、角度、图形大小和颜色，在 2×2 预览中检查边缘连续。
- 03 · 导出素材
下载 SVG 或 PNG，也可复制 CSS data URL 用作页面背景。
常见问题
使用前先了解这些
什么叫无缝图案？
平铺单元在水平和垂直方向重复时，边缘不会出现断裂或额外缝隙。
透明背景怎么使用？
开启透明背景后，SVG 不绘制底色；CSS 仍保留 transparent，方便叠加在页面颜色上。
能导入自己的 SVG 吗？
首版只生成受控图形，不导入用户 SVG，避免脚本、外链和视图框问题。
PNG 是一张完整背景吗？
PNG 导出为 2×2 平铺预览，适合快速检查；实际网页背景建议使用 SVG 或 CSS。