设计

SVG 背景图案生成器

在浏览器里可视化生成可平铺的 SVG 背景图案。先选一种图形，比如圆点、网格、斜线、三角、十字、折线或波浪，再设置前景色和背景色、平铺尺寸、线条或圆点的粗细以及前景透明度。预览区会把图案铺满整个画面，让你直接看清它重复后的样子，输出同时给出可直接使用的 CSS 数据 URI 背景，以及干净的独立 SVG 文件。所有计算都在本地完成，设计内容不会离开浏览器。

  • 圆点、网格、横线、竖线、斜线、棋盘格、三角、十字、折线和波浪共十种可平铺图形
  • 可分别控制前景色、背景色、平铺尺寸、图形粗细和前景透明度
  • 预览把图案无缝铺满整个画面，而不是只看一个单元格
  • 既能复制带内联 SVG 数据 URI 的 CSS，也能下载干净的独立 SVG 文件
  • 可选透明背景，让图案叠在任意表面之上，全部在浏览器本地计算
工具/SVG 背景图案生成器
圆点
透明度80%
平铺尺寸22px
图形粗细1.5px
22px
background-color: #f8fafc; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%221.5%22%20fill%3D%22%231e293b%22%20fill-opacity%3D%220.8%22%2F%3E%3C%2Fsvg%3E"); background-size: 22px 22px;
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><rect width="22" height="22" fill="#f8fafc"/><circle cx="11" cy="11" r="1.5" fill="#1e293b" fill-opacity="0.8"/></svg>
快捷操作

功能简介

把图形、颜色、尺寸和疏密放进同一个面板，让你在真实表面上判断重复背景的效果，而不必手写 SVG 路径。调到满意后，直接把 CSS 或 SVG 复制进项目即可。

  1. 01

    十种可平铺图形

    圆点、网格、横线竖线、斜线、棋盘格、三角、十字、折线和波浪都能无缝平铺，重复时不会露出接缝。

  2. 02

    颜色与透明度

    前景和背景可以分开设置，并把前景透明度调低，让图案像安静的纹理，而不是抢眼的覆盖层。

  3. 03

    尺寸与疏密

    平铺尺寸决定图形重复的频率，图形粗细决定线条或圆点的厚度，同一种图形既能做细密纹理，也能做醒目主视觉。

  4. 04

    无缝实时预览

    预览会把图案铺满整个表面，而不是只显示一个单元格，方便你判断真实节奏，并尽早发现可能露出的接缝。

  5. 05

    CSS 与 SVG 双输出

    既能复制带内联数据 URI 背景的 CSS 直接使用，也能拿到独立 SVG 文件，放进设计工具或资源流程。

  6. 06

    透明叠加

    关掉背景就得到没有填充的图案，可以叠在渐变、图片或主题表面之上，而不会自己刷上一层颜色。

如何使用

在一个面板里，从空白表面做到可复用的背景，无论你想要内容后面的淡纹理，还是英雄区里醒目的主视觉。

  1. 01

    先选一个预设，或者从圆点、网格、横竖线、斜线、棋盘格、三角、十字、折线、波浪里挑一种图形。

  2. 02

    设置前景色和背景色，或者关掉背景，得到能叠在任何表面之上的透明图案。

  3. 03

    调整平铺尺寸控制图形重复的频率，再用图形粗细设置线条或圆点的厚度。

  4. 04

    把前景透明度调低，直到图案更像纹理，而不是压在内容之上的抢眼覆盖层。

  5. 05

    在实时预览里看清平铺效果，然后复制 CSS 背景或下载独立的 SVG 文件。

功能说明

重复背景能在不依赖沉重位图的情况下，为界面带来纹理和节奏，因此它需要轻量、易于换主题，并且方便放进 CSS 和设计稿。

  • 十种图形都能无缝平铺，一段很小的数据 URI 就能铺满任意尺寸的表面
  • 前景色和背景色可分别设置，并提供可选透明背景用于叠加
  • 前景透明度让图案保持为安静纹理，而不是一整块抢眼的覆盖层
  • 平铺尺寸和图形粗细把同一种图形变成从细颗粒到醒目主视觉的不同效果
  • CSS 输出使用内联 SVG 数据 URI，背景图不需要额外的网络请求
  • 同时生成独立 SVG 文件，便于设计工具、图标流程和文档使用
  • 随机功能可以在确定方向后，快速尝试新的图形、颜色和尺寸组合
  • 实时预览铺满整个表面，让可能露出的接缝在上线前就被发现
  • 所有生成都在浏览器本地完成，未发布的产品界面和品牌素材保持私密
  • 输出体积小、边缘清晰、与分辨率无关，在高密度屏幕上也能清晰缩放

适合哪些场景

重复图案很少是画面的主角。它在内容后面加一层安静纹理，给空白区域一点支撑，或者在不和真实界面争抢注意力的前提下强化品牌。

  1. 英雄区与版块背景

    在英雄区或功能版块后面铺一层淡淡的圆点网格或斜线，既增加层次，又不会把注意力从标题和行动按钮上拉走。

  2. 卡片与空状态

    给原本空白的卡片或空状态填一层淡纹理，让这块区域显得是刻意设计，而不是没做完，同时仍然保持克制。

  3. 邮件与通讯设计

    体积很小的平铺 SVG 适合做邮件模板的轻量背景，而在邮件里沉重的图片常常被拦截或加载缓慢。

  4. 品牌与营销页面

    用品牌色的十字、三角或波浪，在落地页和活动版块里强化视觉识别，而不需要专门绘制插画。

  5. 仪表盘与数据界面

    低对比的网格或线条图案在图表和表格后面暗示结构，分隔区域而不必到处加硬边框。

  6. 占位与加载骨架

    中性的棋盘格或线条图案在图片加载时充当占位，提示这里稍后会被真实内容填满。

  7. 印刷与海报排版

    因为输出是矢量 SVG，同一种图案放到海报或印刷排版里也能清晰缩放，不会出现小位图平铺时的模糊。

  8. 设计系统纹理

    稳定的图案配方可以沉淀成可复用的背景 Token，让每个需要纹理的表面共用同一套，而不是各写一份路径。

延伸阅读

当图案从品牌色或 Token 出发时，先用 颜色转换器 把颜色规整好，让前景和背景落在干净的基准上。当图案下方的表面本身还带渐变时，再用 渐变生成器 把两者一起设计，让纹理和背景在整个组件里保持一致。

使用建议

图案看起来只是个随手的装饰选择，但只有把对比度、尺寸、主题和复用一起考虑，才能在生产环境里站得住。

  • 让图案和背景之间保持低对比，使纹理为内容服务，而不是和上面的文字争抢注意力。
  • 选一个适合表面的平铺尺寸：细颗粒读起来像纹理，而大尺寸主视觉很快就会成为这块区域的焦点。
  • 优先把前景透明度调低，而不是去取一个接近背景的颜色，这样图案保持单一干净的色相，更容易换主题。
  • 在浅色和深色主题里都检查图案，因为在米色上读起来很克制的纹理，到了近黑表面上可能消失或变得刺眼。
  • 当图案叠在渐变或图片上时优先用透明背景，让它干净地叠加，而不是自己刷上一整块颜色。
  • 避免在大段正文后面用非常密集、高对比的图案，因为嘈杂的背景会降低可读性，让读者疲劳。
  • 把一小套图案配方作为背景 Token 复用，而不是在各个组件里到处粘贴一次性的数据 URI。
  • 尽量让平铺单元保持小巧，因为紧凑的无缝单元能让数据 URI 更短、重复更高效。

边界与注意事项

生成的图案是标准 SVG，但它最终呈现的样子，仍然取决于所在的表面、主题和周围的排版。

  • 这些图案都按无缝平铺设计，但在很小的单元里用很粗的图形，重复边缘附近仍可能显得偏重。
  • 内置图形之外的任意旋转被有意去掉，因为自由旋转的单元很难在重复时不露出接缝。
  • 为浅色表面调好的图案，通常需要为深色模式单独做一遍，而不是默认直接复用。
  • 透明图案取决于它后面的内容，因此请在真实组件里确认叠加结果，而不只是看预览。
  • 极小的单元配上很细的线条，在部分屏幕上随页面滚动时可能轻微闪烁，重要界面要测试一下动态效果。
  • 这个工具专注于几何、可平铺的背景，细致的插画和照片质感属于另一类素材。
  • 如果项目要求使用 Token 化样式，请把输出映射到获批的背景 Token，而不是到处粘贴原始数据 URI。

常见问题

围绕在前端工作和设计协作中使用 SVG 背景图案时最常见的问题，涉及输出、平铺、主题和实际限制。

生成的 CSS 能直接用于生产吗？

可以。CSS 使用标准的内联 SVG 数据 URI 作为背景图，能直接放进样式表、组件样式或 CSS 变量，不需要额外文件。

为什么用 SVG 图案而不是 PNG？

平铺 SVG 体积很小、在任意分辨率下都清晰、也容易改色。PNG 单元更重，在高密度屏幕上可能模糊，换主题也更麻烦。

图案平铺时会露出接缝吗？

每种图形都按在单元内无缝重复来构建。预览会把图案铺满整个表面，让你在使用前确认没有可见接缝。

怎样让图案变成透明的？

关掉背景，让 SVG 只保留前景图形。这样图案就会叠在它后面的任何表面、渐变或图片之上。

可以下载真正的 SVG 文件吗？

可以。除了 CSS，工具还会生成一个干净的独立 SVG 单元，你可以下载后在设计工具、资源流程或文档里打开。

怎样让图案更克制？

把前景透明度调低，并让它和背景的对比保持很小。更大的平铺尺寸配上更细的图形，也会读起来更安静。

它在深色模式下能用吗？

可以用，但同一套配方很难同时适配两种主题。请为深色表面换一组颜色并检查对比，因为浅色模式的纹理在近黑上可能消失。

编辑时我的设计会被上传吗？

不会。所有预览、CSS 和 SVG 生成都在浏览器本地完成，因此可以安全用于未发布的产品界面和保密的品牌工作。

背景图案会影响性能吗？

小巧的无缝单元开销很低，因为它是内联数据 URI，没有额外请求。但在大面积滚动表面上用非常密集的图案，仍会增加绘制成本。

这段 CSS 能配合 Tailwind 用吗？

可以。背景图数据 URI 适合写成任意值，图案也可以放进主题扩展，或作为 CSS 变量供组件引用。

更多相关工具

图案只是把纹理和颜色带进界面的其中一层。把它和颜色转换、渐变设计搭配使用，就能从规整后的品牌色，经过干净的背景，走向一致、可上线的表面。