Box Shadow Generator

Implementation

interface Shadow {
  x: number;
  y: number;
  blur: number;
  spread: number;
  color: string;
  inset?: boolean;
}

function generateBoxShadow(shadows: Shadow[]): string {
  return shadows
    .map(s => {
      const inset = s.inset ? 'inset ' : '';
      return `${inset}${s.x}px ${s.y}px ${s.blur}px ${s.spread}px ${s.color}`;
    })
    .join(', ');
}

// Presets
const presets = {
  subtle: [{ x: 0, y: 1, blur: 3, spread: 0, color: 'rgba(0,0,0,0.1)' }],

  medium: [
    { x: 0, y: 4, blur: 6, spread: -1, color: 'rgba(0,0,0,0.1)' },
    { x: 0, y: 2, blur: 4, spread: -1, color: 'rgba(0,0,0,0.06)' },
  ],

  elevated: [
    { x: 0, y: 10, blur: 15, spread: -3, color: 'rgba(0,0,0,0.1)' },
    { x: 0, y: 4, blur: 6, spread: -2, color: 'rgba(0,0,0,0.05)' },
  ],

  glow: [{ x: 0, y: 0, blur: 20, spread: 0, color: 'rgba(59,130,246,0.5)' }],
};

// Usage
const css = `box-shadow: ${generateBoxShadow(presets.elevated)};`;

Usage

Use generateBoxShadow() with an array of shadow configs, or use the presets.

Examples