CSS背景图案生成器 - 纯CSS渐变图案在线创建

使用纯CSS渐变生成可重复的背景图案。21种图案，实时预览，自定义颜色，大小和透明度控制。一键复制CSS代码 — 100%客户端处理。

图案颜色

背景颜色

图案大小30px

透明度1.00

圆点半径3.00px

预览

生成的CSS

background-color: #ffffff;
background-image: radial-gradient(circle, #333333 3px, transparent 3px);
background-size: 30px 30px;

常见问题

什么是CSS背景图案？

CSS背景图案是完全使用CSS渐变函数（如linear-gradient()、radial-gradient()和repeating-conic-gradient()）创建的可重复视觉设计。与基于图像的背景不同，CSS图案无需额外文件下载，可无限缩放，在任何屏幕分辨率下都清晰显示。

如何使用这个CSS背景图案生成器？

浏览图案库并点击缩略图选择图案。使用颜色选择器自定义图案颜色和背景颜色。使用滑块调整大小、透明度等参数。在预览区域实时查看图案。复制生成的CSS代码并粘贴到您的样式表中。

我的数据安全吗？会发送到服务器吗？

是的，您的数据完全安全。此工具100%在浏览器中运行。任何颜色选择、图案或生成的CSS代码都不会发送到任何服务器。所有图案生成都在客户端通过JavaScript完成。

CSS图案和SVG图案有什么区别？

CSS图案完全由CSS渐变函数构建，不需要额外文件或HTTP请求。SVG图案通过url()或数据URI嵌入CSS中的矢量图形。CSS图案代码量更小，更易于自定义，且无需SVG解析即可原生渲染。

CSS图案会影响网站性能吗？

CSS图案性能极佳。它们不增加HTTP请求，不需要图像解码，由浏览器合成引擎原生渲染。典型图案仅增加100-300字节CSS，比等效的图像背景快得多。

代码示例

// Creating CSS background patterns programmatically

// Dots pattern
function createDotsPattern(dotColor, bgColor, size = 20, dotRadius = 3) {
  return {
    backgroundImage: `radial-gradient(circle, ${dotColor} ${dotRadius}px, transparent ${dotRadius}px)`,
    backgroundSize: `${size}px ${size}px`,
    backgroundColor: bgColor,
  };
}

// Checkerboard pattern
function createCheckerboard(color, bgColor, size = 40) {
  return {
    backgroundImage: `repeating-conic-gradient(${color} 0% 25%, transparent 0% 50%)`,
    backgroundSize: `${size}px ${size}px`,
    backgroundColor: bgColor,
  };
}

// Diagonal stripes pattern
function createDiagonalStripes(stripeColor, bgColor, size = 20, angle = 45) {
  const half = size / 2;
  return {
    backgroundImage: `repeating-linear-gradient(${angle}deg, ${stripeColor}, ${stripeColor} ${half}px, transparent ${half}px, transparent ${size}px)`,
    backgroundSize: `${size}px ${size}px`,
    backgroundColor: bgColor,
  };
}

// Grid pattern
function createGrid(lineColor, bgColor, size = 30, thickness = 1) {
  return {
    backgroundImage: [
      `linear-gradient(0deg, ${lineColor} ${thickness}px, transparent ${thickness}px)`,
      `linear-gradient(90deg, ${lineColor} ${thickness}px, transparent ${thickness}px)`,
    ].join(', '),
    backgroundSize: `${size}px ${size}px`,
    backgroundColor: bgColor,
  };
}

// Apply pattern to a DOM element
function applyPattern(element, patternCSS) {
  Object.assign(element.style, patternCSS);
}

// Usage
const myDiv = document.getElementById('patterned-div');
applyPattern(myDiv, createDiagonalStripes('rgba(0,0,0,0.1)', '#ffffff', 20, 45));
applyPattern(myDiv, createCheckerboard('rgba(0,0,0,0.05)', '#f0f0f0', 40));