CSS Box Shadow जनरेटर - विज़ुअली शैडो बनाएं ऑनलाइन

// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
  return layers.map(layer => {
    const inset = layer.inset ? 'inset ' : '';
    const { r, g, b } = hexToRgb(layer.color);
    const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
    return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
  }).join(', ');
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : { r: 0, g: 0, b: 0 };
}

// Usage
const shadow = generateBoxShadow([
  { offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
  { offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)