所有颜色工具

用近 2000 种设计制作无缝 SVG 背景图案:可调整颜色、缩放、间距和角度,然后复制 CSS,或下载 SVG、PNG、WebP 文件。

免费

1选择图案

此处是您的标题

查看图案衬在真实内容背后的效果。

立即开始
图案

按合集浏览


关于 图案生成器

图案生成器能把近 2000 种现成设计变成可以调整、随即使用的背景。您可以浏览 14 个合集,从波浪、波点和镶嵌,到苏格兰格纹、日本青海波、伊斯兰星形、装饰艺术扇形、像素精灵和迷彩,并用自己的颜色查看每一种。

每个设计都以矢量图形绘制,在任何缩放比例和任何角度下都能无可见接缝地重复。您可以修改最多六种颜色,以及缩放、位置、间距、线条粗细和角度,把填充的形状变成轮廓,或者用循环动画让图案动起来。地形图、沃罗诺伊单元和特吕谢图块等生成式图案,每次点击都能产生新的变体。

满意之后,可以将它复制为 CSS、SCSS、Tailwind 配置、内联 SVG、数据 URI 或 React 组件,也可以下载任意尺寸(最大 8000 像素)的 SVG、PNG、JPG 或 WebP,还可以导出单个图块,用于您自己的重复排布。所有操作都在浏览器中运行:不会上传任何内容,也不需要账号。

如何使用 图案生成器

  1. 选择图案:按名称搜索,或按合集和颜色数量筛选。
  2. 用取色器、现成调色板或“新调色板”选择颜色。
  3. 调整缩放、位置、间距、线条粗细和角度。点击“给我灵感”之前,先锁定想保留的数值。
  4. 用“显示图块”“在页面中”和“在文字中”预览进行检查。
  5. 复制代码或下载文件,并用“复制链接”日后回到这个确切的图案。

常见问题

是的。该工具免费,无需注册,也没有使用限制:每个图案都在您的浏览器中绘制,不会有文件发送到服务器。

可以。您导出的图案可用于个人和商业作品,例如网站、应用、包装和印刷品,无需署名。

不会。每个越过图块边缘的形状都会在对侧再绘制一次,因此重复是无缝的。使用“显示图块”预览,可以准确看到一个图块从哪里开始、到哪里结束。

CSS 最简单:把规则粘贴到样式表中,并应用到任意元素即可。在 0、90、180 或 270 度时,它使用带 background-size 的一个小图块;在其他角度时,它使用填满元素的 SVG。Tailwind、SCSS、React 和数据 URI 版本包含相同的图案。

动画内置于 SVG 中,因此无需脚本,在现代浏览器中也可作为 CSS 背景运行。请在您需要支持的浏览器中检查。PNG、JPG 和 WebP 文件仍是静态图片,因此只保留第一帧。

迷彩和地形图等有机设计包含大量曲线。代码大小显示在复制按钮旁边。如果它对页面来说太重,请选择图块更小的设计,或改用 PNG 图块。

可以,几乎所有图案都支持:开启“透明背景”,然后导出为 CSS、SVG、PNG 或 WebP。少数重叠设计用背景色遮盖形状,因此需要纯色背景。JPG 文件不支持透明。


热门搜索
svg 图案生成器 无缝图案生成器 css 背景图案 重复图案制作 免费背景图案 几何图案生成器 tailwind 背景图案 无缝图块 png
需要帮助?
使用此工具时遇到问题?请告诉我们的团队。
报告问题

将此免费工具添加到你自己的网站:复制并粘贴下面的代码。