Glassmorphism Generator — TypeScript source

// Pure glassmorphism CSS builder - no React, no DOM, deterministic.
// Builds a frosted-glass declaration block from blur/opacity/tint/radius.
// Never throws.

export interface GlassConfig {
  blur: number; // px (>=0)
  opacity: number; // 0..1 background opacity
  tint: string; // hex color
  radius: number; // px (>=0)
  borderOpacity: number; // 0..1
  saturation?: number; // % (default 180)
}

export interface GlassCss {
  background: string;
  backdropFilter: string;
  webkitBackdropFilter: string;
  border: string;
  borderRadius: string;
  boxShadow: string;
  fullCss: string;
}

export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const h = (hex || '').trim().replace(/^#/, '');
  if (/^[0-9a-f]{3}$/i.test(h)) {
    const r = parseInt(h[0] + h[0], 16);
    const g = parseInt(h[1] + h[1], 16);
    const b = parseInt(h[2] + h[2], 16);
    return { r, g, b };
  }
  if (/^[0-9a-f]{6}$/i.test(h)) {
    return {
      r: parseInt(h.slice(0, 2), 16),
      g: parseInt(h.slice(2, 4), 16),
      b: parseInt(h.slice(4, 6), 16),
    };
  }
  return null;
}

export function rgba(r: number, g: number, b: number, a: number): string {
  const clamped = Math.max(0, Math.min(1, a));
  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${Math.round(clamped * 100) / 100})`;
}

export function buildGlassmorphism(config: GlassConfig): GlassCss {
  const blur = Math.max(0, config.blur ?? 0);
  const opacity = Math.max(0, Math.min(1, config.opacity ?? 0));
  const radius = Math.max(0, config.radius ?? 0);
  const borderOpacity = Math.max(0, Math.min(1, config.borderOpacity ?? 0));
  const saturation = config.saturation ?? 180;
  const rgb = hexToRgb(config.tint) ?? { r: 255, g: 255, b: 255 };

  const background = rgba(rgb.r, rgb.g, rgb.b, opacity);
  const backdropFilter = `blur(${blur}px) saturate(${saturation}%)`;
  const border = `1px solid rgba(255, 255, 255, ${Math.round(borderOpacity * 100) / 100})`;
  const borderRadius = `${radius}px`;
  const boxShadow = '0 8px 32px 0 rgba(31, 38, 135, 0.37)';

  const fullCss = [
    `background: ${background};`,
    `-webkit-backdrop-filter: ${backdropFilter};`,
    `backdrop-filter: ${backdropFilter};`,
    `border-radius: ${borderRadius};`,
    `border: ${border};`,
    `box-shadow: ${boxShadow};`,
  ].join('\n');

  return { background, backdropFilter, webkitBackdropFilter: backdropFilter, border, borderRadius, boxShadow, fullCss };
}