Softonic

图案背景生成器

步 1 / 3

选择图案

每个选项都会生成不含图片文件的重复 CSS 渐变图案。

图案样式

选择圆点、网格、密集条纹、棋盘格、交叉线或疏排对角线，再设置背景色、图案色和重复间距。生成器会用 CSS 渐变构建重复背景，显示实时预览，并提供可粘贴到 CSS 规则中的属性。根据所选图案，结果会使用 background-color、background-image、background-size 和 background-position。工具不会生成图片或 SVG 文件。

如何生成一个图案

  1. 1

    选择图案

    圆点、网格、密集条纹、棋盘格、交叉线或疏排对角线。

  2. 2

    设置两种颜色

    选择背景色，以及渐变线条或形状所用的图案色。

  3. 3

    调整间距

    重复间距可设为 5 px 的密集纹理到 80 px 的疏朗图案。

  4. 4

    查看实时预览

    更改图案、颜色或间距时，预览会立即更新。

  5. 5

    复制 CSS

    复制生成的属性，并粘贴到任意 CSS 规则中。

纯 CSS，没有图片文件

每一种图案都用 CSS 渐变绘制在纯色 background-color 之上，不需要托管或请求单独的背景图片。例如，圆点图案如下：

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

CSS 背景默认重复。工具生成的尺寸和位置值会在重复时对齐各图层，但浏览器缩放和小数设备像素可能让边缘略有差异。调整间距可让纹理更密集或更疏朗。

每种图案由什么构成

图案 由什么构成 适用于
圆点 一个重复的 radial-gradient 科技页面、仪表盘、现代 UI
网格 两条交叉的 linear-gradient 线 方格纸质感、白板、日程规划
密集条纹 一个 45 度的 repeating-linear-gradient 理发店旋转灯式点缀、活泼的版块
棋盘格 四个带角度的 linear-gradient 图层 复古 UI、透明背景风格
交叉线 两个交叉的 repeating-linear-gradient 素描与印刷纹理、编辑排版
疏排对角线 一个 45 度的 repeating-linear-gradient 警示状态、条纹遮阳篷、运动风格

颜色与对比度技巧

  • 背景宜采用低对比度。 图案色接近背景色时通常更低调，高对比度则可能与页面内容争夺注意力。
  • 匹配你的品牌。 用品牌色作为图案颜色，而不是普通的灰色，让纹理与你的识别形象相呼应。
  • 深色模式。 可尝试深色背景和稍浅的图案色。强对比图案在大面积深色表面上可能显得杂乱。
  • 分别检查文字与两种颜色。 如果文字覆盖图案，请测试文字颜色与背景色及图案色的对比度，因为两者都可能出现在字形下方。本工具只预览图案，不执行 WCAG 对比度审查。

用在哪里

  • 主视觉和版块背景，需要一点纹理而不用图片。
  • 仪表盘中的卡片和面板，一层淡淡的网格或圆点能增添结构感。
  • 空状态和占位区，棋盘格在这里读起来很中性。
  • 印刷风格的排版和幻灯片，适合方格纸或交叉线的质感。

图案使用 CSS 而非独立的背景资源，因此不会增加图片请求。以后也可以在浏览器开发者工具中调整渐变、尺寸和位置值。

常见问题

不会。输出的是纯 CSS：一个 background-color 加上一个由 CSS 渐变构成的 background-image。你复制这段 CSS 并把它粘贴到一个元素上。没有需要下载或托管的图片或 SVG 文件。

CSS 背景默认重复，生成的尺寸和位置值会对齐所选图案的各个图层。浏览器缩放和小数设备像素有时会让重复边缘略有不同，请在实际使用尺寸下检查效果。

低对比度图案通常较少分散注意力，但这并不能证明文字易读。请分别检查文字颜色与其下方可能出现的每一种颜色。对于密集文字，纯色背景通常更容易验证。

这些颜色只是 CSS 里的十六进制值。编辑 background-color 以及渐变内部的颜色，或者在这里用新颜色重新生成并复制新的代码片段。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本