背景图案生成器

在线 CSS 背景图案生成器，选择点阵、网格、条纹、棋盘、波点等图案，调节颜色、大小和间距，生成可平铺的背景，输出 CSS 和 data URI。

图案类型

背景色

前景色

图案尺寸 (px)

线条宽度 (px)

预览

生成的CSS代码

工具介绍

背景图案生成器可以快速生成多种常见网页背景图案，支持自定义颜色、尺寸和线条粗细，直接输出可用的CSS代码，无需图片资源。

本工具使用CSS原生渐变函数生成背景图案，不需要任何图片资源，优点是体积小、缩放清晰，支持任意尺寸平铺：

生成的CSS代码结构：

background-color: [背景色];
background-image: [渐变定义];
[可选：background-size / background-position];
background-repeat: repeat;

生成的背景图案可以商用吗？

生成的CSS代码属于简单原创设计，可自由商用，没有版权限制。

为什么我的图案显示不清晰？

CSS渐变背景是矢量生成的，任意分辨率都清晰，如果显示模糊可能是浏览器渲染问题，尝试调整尺寸和线宽即可。

可以生成带透明度的背景吗？

本工具当前仅支持十六进制纯色选择，如果需要透明度，可以手动修改生成的CSS代码，将颜色改为rgba格式即可，例如：background-color: rgba(255,255,255,0.5);

如何把生成的图案用到我的网页中？

复制生成的完整CSS代码，添加到你需要添加背景的元素样式中即可，例如：.container { [粘贴生成的CSS] }