NEUMORPHISM GENERATOR

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

let shape = 'flat';
    const elSize = document.getElementById('input-size');
    const elRadius = document.getElementById('input-radius');
    const elDist = document.getElementById('input-dist');
    const elBlur = document.getElementById('input-blur');
    const elBg = document.getElementById('input-bg');

    const stageBg = document.getElementById('stage-bg');
    const box = document.getElementById('neu-box');
    const cssOut = 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 renderNeumorphism() {
      const size = parseInt(elSize.value);
      const radius = parseInt(elRadius.value);
      const dist = parseInt(elDist.value);
      const blur = parseInt(elBlur.value);
      const bg = elBg.value;

      document.getElementById('val-size').textContent = size + 'px';
      document.getElementById('val-radius').textContent = radius + 'px';
      document.getElementById('val-dist').textContent = dist + 'px';
      document.getElementById('val-blur').textContent = blur + 'px';

      stageBg.style.backgroundColor = bg;
      box.style.width = size + 'px';
      box.style.height = size + 'px';
      box.style.borderRadius = radius + 'px';
      box.style.backgroundColor = bg;

      // Dark shadow & light highlight calculation
      const darkShadow = `rgba(0, 0, 0, 0.45)`;
      const lightShadow = `rgba(255, 255, 255, 0.08)`;

      let shadowCss = '';
      if (shape === 'flat') {
        shadowCss = `${dist}px ${dist}px ${blur}px ${darkShadow}, -${dist}px -${dist}px ${blur}px ${lightShadow}`;
      } else if (shape === 'pressed') {
        shadowCss = `inset ${dist}px ${dist}px ${blur}px ${darkShadow}, inset -${dist}px -${dist}px ${blur}px ${lightShadow}`;
      } else if (shape === 'concave') {
        shadowCss = `${dist}px ${dist}px ${blur}px ${darkShadow}, -${dist}px -${dist}px ${blur}px ${lightShadow}`;
        box.style.background = `linear-gradient(145deg, #18181d, #22222a)`;
      } else if (shape === 'convex') {
        shadowCss = `${dist}px ${dist}px ${blur}px ${darkShadow}, -${dist}px -${dist}px ${blur}px ${lightShadow}`;
        box.style.background = `linear-gradient(145deg, #22222a, #18181d)`;
      }

      box.style.boxShadow = shadowCss;

      const css = `border-radius: ${radius}px;
background: ${bg};
box-shadow: ${shadowCss};`;

      cssOut.textContent = css;
    }

    document.querySelectorAll('.btn-shape').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.btn-shape').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        shape = btn.dataset.shape;
        renderNeumorphism();
      });
    });

    [elSize, elRadius, elDist, elBlur, elBg].forEach(el => el.addEventListener('input', renderNeumorphism));

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

    renderNeumorphism();