CSS 图案背景生成器

大多数“模式生成器”工具都会悄悄地为每个选项重复使用相同的重复线性梯度公式，而只是更改数字。这个则不然：这里的六种模式类型中的每一种都是根据实际生成该形状的特定 CSS 技术构建的。条纹使用带有两个色带的单个重复线性渐变。点使用纯粹通过背景大小平铺的径向渐变（经典的 CSS 点技巧），而不是重复径向渐变，后者无法在矩形网格上干净地平铺圆形点。棋盘格使用真正的四象限圆锥梯度公式：以正方形图块为中心的圆锥梯度自然地在 90 度边界处分成四个象限正方形，并在这些象限图块上交替使用两种颜色，形成真正的棋盘格，而不是近似值。

网格和对角线交叉线都将两个重复线性渐变层作为单独的背景图像条目，而不是用边框技巧伪造第二个方向。网格结合了“向右”和“向下”重复渐变，以获得清晰的水平和垂直标线。 Crosshatch 为篮子编织风格的对角线编织添加 +45 度和 -45 度重复渐变 - 值得精确说明：这是诚实的交叉线，而不是真正的人字形几何形状，并且该工具以这种方式标记它而不是夸大其词。三角形重用了棋盘格的四楔形圆锥渐变技术，但开始旋转 45 度的渐变，这将楔形边界从图块的边缘中点移动到其角点，并将相同的四个楔形变为四个角到角的三角形，而不是四个象限正方形。

每个图案类型仅公开实际适用于它的控件 - 角度滑块显示条纹，点半径和间距显示点，线条粗细显示网格和剖面线 - 并且大平铺预览框会在每次更改时重新绘制，以便您可以在提交值之前看到几个完整的重复。将输出模式翻转为 SVG，相同的图案会重新显示为由普通矩形、圆形、路径或多边形基元构建的 <pattern> 元素，准备好粘贴到任何 SVG 文档的 <defs> 中，并一键下载独立的 .svg 文件。

一切都在您的浏览器本地运行：没有图像上传，没有服务器往返，没有帐户。对于不重复的纯色或渐变填充，此网站上的 CSS 渐变生成器是正确的工具；这个专门用于从零图像资源构建的可平铺几何背景。