CSS 背景图案生成器
用纯 CSS 生成无缝重复的背景图案——圆点、网格、条纹、棋盘、波浪和 3D 立方体——使用您自己的颜色、缩放和透明度。复制现成的 CSS 规则和 HTML 片段，无需图像文件。
输入
颜色
降低至 10-20% 可在文字后面创建细致的纹理。
几何
一个重复瓷砖的大小，以像素为单位。
线条的厚度，或圆点的半径。
输出
生成的规则限制在此类，因此不会与您自己的样式发生冲突。
输出
您的图案将显示在这里。
实际生成的 CSS，在隔离的 Shadow DOM 中渲染——正是您复制的内容。
内联 min-height 仅用于给空演示框设置大小——在您自己的布局中将其删除。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-background-pattern-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"pattern": "dots",
"color": "#6366f1",
"bgColor": "#ffffff",
"opacity": "100",
"size": "32",
"weight": "3",
"className": "io-pattern"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-background-pattern-generator` tool (CSS Background Pattern Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-background-pattern-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 背景图案生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
用 CSS 渐变制作的重复背景图案几乎没有重量。没有要托管的图像文件，没有额外的 HTTP 请求，当有人在 Retina 屏幕上打开您的页面时没有模糊的边缘，更改颜色只需编辑两个十六进制值，而不是重新导出 PNG。此生成器为您构建该 CSS：选择一个图案，设置颜色、缩放和透明度，然后复制完成的规则。
所有操作都在您的浏览器中进行——您输入的内容不会上传到任何地方。
如何使用
- 选择一个图案。 有十五个系列可用：波点、错位波点、网格、方格纸、水平/竖直/斜条纹、网纹、等轴线、棋盘、菱形、三角形、锯齿、波浪和 3D 立方体。
- 设置颜色。 "图案颜色" 绘制形状，"背景颜色" 在后面填充。
- 调整几何。 图案大小是一个重复瓷砖的宽度（以像素为单位）；线条粗细是线条的厚度（或圆点的大小）。对于几何结构是纯比例的图案（如棋盘），线条粗细是隐藏的，因为没有线条可以加粗。
- 降低透明度。 这是大多数人想要的设置，但大多数生成器都没有。在 100% 处，图案会与您的内容竞争；在 10–20% 处，它读起来像纹理。
- 复制 CSS 并将其粘贴到您的样式表中。旁边的 HTML 片段显示该规则所需的标记。
设置
- 图案 — 几何系列。每一个都是由
linear-gradient、repeating-linear-gradient或radial-gradient构建的纯background-image。 - 图案颜色/背景颜色 — 十六进制值。
background-color位于渐变层下方，因此图案颜色是您看到的。 - 图案透明度 — 低于 100% 时，图案颜色作为
rgba()发出，以便背景透过显示。 - 图案大小 — 4px 至 160px。小值给出细纹理，大值给出大胆的图形块。
- 线条粗细 — 限制在瓷砖大小的一半，因为比这更粗的线条会使瓷砖变成实色块。
- 类名 — 规则限制在此类，因此不会与样式表中的任何内容冲突。
为什么 CSS 有多个 background-image 层？
大多数这些图案无法用单个渐变绘制。网格是垂直线系列加水平线系列；棋盘是两个错位的对角渐变；等轴立方体需要六个层来给每个面不同的阴影。CSS 按写入的顺序绘制它们，最上面的第一层，background-size/background-position 与这些层一一对应。看起来冗长，但它是一个属性——您可以安全地按原样粘贴整个块。
为什么条纹图案上缺少 background-size？
条纹、网纹和等轴系列使用 repeating-linear-gradient，它在渐变停止中具有自己的重复周期。在那里添加 background-size 不会改变任何内容，所以该工具不会发出它。
这些图案能在旧浏览器中工作吗？
每个图案都使用 CSS 渐变，自 2012 年左右以来在所有地方都受支持。条纹系列使用多位置颜色停止点（color 0 6px），这需要 2019 年或更新版本的浏览器——所有当前版本的 Chrome、Firefox、Safari 和 Edge 都支持它们。
如果我想要文字后面的图案怎么办？
将透明度设置为 10–20% 并选择小图案大小。100% 强度的繁忙图案使正文难以阅读；相同的图案在 15% 时读起来像纸张纹理，不会碍事。
相关工具
需要渐变而不是图案？CSS 渐变生成器可视化构建线性和径向渐变。对于作为真实 SVG 文件而非 CSS 发出的重复形状，请使用SVG 图案生成器，对于柔和模糊背景，请使用 CSS Aurora Blob 生成器。