CSS ग्लासमॉर्फिज्म जनरेटर - फ्रॉस्टेड ग्लास इफेक्ट बनाएं

function hexToRgba(hex, opacity) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}

function generateGlassmorphismCSS(options = {}) {
  const {
    blur = 10,
    bgColor = '#ffffff',
    bgOpacity = 0.15,
    borderEnabled = true,
    borderWidth = 1,
    borderColor = '#ffffff',
    borderOpacity = 0.2,
    borderRadius = 12,
    shadowEnabled = true,
    shadowX = 0,
    shadowY = 4,
    shadowBlur = 30,
    shadowSpread = 0,
    shadowColor = '#000000',
    shadowOpacity = 0.1,
  } = options;

  const rules = [];
  rules.push(`background: ${hexToRgba(bgColor, bgOpacity)};`);
  rules.push(`-webkit-backdrop-filter: blur(${blur}px);`);
  rules.push(`backdrop-filter: blur(${blur}px);`);

  if (borderRadius > 0) {
    rules.push(`border-radius: ${borderRadius}px;`);
  }
  if (borderEnabled && borderWidth > 0) {
    rules.push(`border: ${borderWidth}px solid ${hexToRgba(borderColor, borderOpacity)};`);
  }
  if (shadowEnabled) {
    rules.push(`box-shadow: ${shadowX}px ${shadowY}px ${shadowBlur}px ${shadowSpread}px ${hexToRgba(shadowColor, shadowOpacity)};`);
  }

  return rules.join('\n');
}

console.log(generateGlassmorphismCSS());
// background: rgba(255, 255, 255, 0.15);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
// border-radius: 12px;
// border: 1px solid rgba(255, 255, 255, 0.2);
// box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);