Glassmorphism Generator — JavaScript source

/**
 * Pure glassmorphism CSS builder - deterministic, no DOM.
 *
 * Language: JavaScript (ES module)
 * CosmoDev polyglot showcase port of the `glassmorphism-generator` tool.
 * Ported from src/lib/glassmorphism.ts - display source, part of CosmoDev's
 * polyglot tool pages.
 *
 * Builds a frosted-glass declaration block from blur / opacity / tint /
 * radius / borderOpacity (+ optional saturation). Parses #rgb and #rrggbb
 * hex tints (case-insensitive), clamps opacity to 0..1, rounds the alpha
 * channel with Math.round(x*100)/100, and joins the six CSS declarations
 * with newlines - byte-for-byte the same string the live lib produces.
 * Pure string math; no external dependencies. Never throws.
 */

/**
 * Parse a #rgb or #rrggbb hex color into RGB components, or null.
 * @param {string} hex
 * @returns {{r:number,g:number,b:number}|null}
 */
export function hexToRgb(hex) {
  const h = (hex || '').trim().replace(/^#/, '');
  if (/^[0-9a-f]{3}$/i.test(h)) {
    return {
      r: parseInt(h[0] + h[0], 16),
      g: parseInt(h[1] + h[1], 16),
      b: parseInt(h[2] + h[2], 16),
    };
  }
  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;
}

/**
 * Format an rgba() string, clamping + 2-decimal-rounding the alpha.
 * @param {number} r
 * @param {number} g
 * @param {number} b
 * @param {number} a
 * @returns {string}
 */
export function rgba(r, g, b, a) {
  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})`;
}

/**
 * Build the full glassmorphism CSS for a config.
 * @param {{blur:number,opacity:number,tint:string,radius:number,borderOpacity:number,saturation?:number}} config
 * @returns {{background:string,backdropFilter:string,webkitBackdropFilter:string,border:string,borderRadius:string,boxShadow:string,fullCss:string}}
 */
export function buildGlassmorphism(config) {
  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 };
}