CSS बैकग्राउंड पैटर्न जनरेटर - शुद्ध 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));