CSS & UI Design

GLASSMORPHISM GENERATOR

Design frosted glass cards and UI components with live backdrop-filter blur controls, transparency, light reflections, and instant CSS export.

Backdrop Blur 16px

Card Opacity 15%

Saturate Filter 180%

Border Width 1px

Border Opacity 30%

Border Radius 16px

Shadow Blur 32px

FROSTED GLASS

Modern glassmorphic user interface card component rendered natively using CSS backdrop-filter.

Developer Reference

Core Algorithm & Standalone Script

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const elBlur = document.getElementById('input-blur');
    const elOpacity = document.getElementById('input-opacity');
    const elSaturate = document.getElementById('input-saturate');
    const elBorderW = document.getElementById('input-border-w');
    const elBorderOp = document.getElementById('input-border-op');
    const elRadius = document.getElementById('input-radius');
    const elShadow = document.getElementById('input-shadow');

    const card = document.getElementById('glass-card');
    const cssOutput = document.getElementById('css-output');
    const toast = document.getElementById('toast');

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function renderGlass() {
      const blur = elBlur.value;
      const opacity = (elOpacity.value / 100).toFixed(2);
      const saturate = elSaturate.value;
      const borderW = elBorderW.value;
      const borderOp = (elBorderOp.value / 100).toFixed(2);
      const radius = elRadius.value;
      const shadow = elShadow.value;

      document.getElementById('val-blur').textContent = blur + 'px';
      document.getElementById('val-opacity').textContent = elOpacity.value + '%';
      document.getElementById('val-saturate').textContent = saturate + '%';
      document.getElementById('val-border-w').textContent = borderW + 'px';
      document.getElementById('val-border-op').textContent = elBorderOp.value + '%';
      document.getElementById('val-radius').textContent = radius + 'px';
      document.getElementById('val-shadow').textContent = shadow + 'px';

      const css = `background: rgba(255, 255, 255, ${opacity});
border-radius: ${radius}px;
box-shadow: 0 8px ${shadow}px 0 rgba(0, 0, 0, 0.37);
backdrop-filter: blur(${blur}px) saturate(${saturate}%);
-webkit-backdrop-filter: blur(${blur}px) saturate(${saturate}%);
border: ${borderW}px solid rgba(255, 255, 255, ${borderOp});`;

      card.style.cssText = css;
      cssOutput.textContent = css;
    }

    [elBlur, elOpacity, elSaturate, elBorderW, elBorderOp, elRadius, elShadow].forEach(input => {
      input.addEventListener('input', renderGlass);
    });

    document.getElementById('btn-copy-css').addEventListener('click', () => {
      navigator.clipboard.writeText(cssOutput.textContent);
      showToast('CSS copied to clipboard!');
    });

    renderGlass();