[Sharing] Frosted Glass + Interactive 3D Cards (CSS & JS)

[imswel]

Hey everyone!

I've been working on a minimal Frosted Glass theme for Heimdall

Preview

Customization

You can adjust the maximum rotation directly in the JavaScript:

const MAX_TILT = 5;

Use a lower value for a more subtle effect, or a higher value for a stronger 3D appearance.

Source code

CSS :

/* Heimdall Frosted Glass */

/* App cards */
#app .item {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --glass-x: 50%;
  --glass-y: 50%;
  --glass-angle: 140deg;
  --glass-shift: 0%;
  --spotlight: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.23) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(
      ellipse 190px 135px at var(--mouse-x) var(--mouse-y),
      rgb(223 242 255 / calc(var(--spotlight) * 0.12)) 0%,
      rgb(170 214 255 / calc(var(--spotlight) * 0.045)) 42%,
      transparent 83%
    ),
    radial-gradient(
      circle 170px at var(--glass-x) var(--glass-y),
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 34%,
      transparent 72%
    ),
    linear-gradient(
      var(--glass-angle),
      rgba(255, 255, 255, 0.19) 0%,
      rgba(255, 255, 255, 0.065) calc(21% + var(--glass-shift)),
      rgba(12, 18, 31, 0.46) calc(64% + var(--glass-shift)),
      rgba(10, 15, 29, 0.57) 100%
    ) !important;
  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
  transform-style: preserve-3d;
  will-change: transform, background;
  transition:
    transform 0.14s ease-out,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Remove overlay */
#app .item::after {
  display: none !important;
}

#app .item:hover,
#app .item:focus-within {
  --spotlight: 1;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(-2px) scale(1.008);
  border-color: rgba(216, 239, 255, 0.34) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 18px rgba(175, 217, 255, 0.055) !important;
}

/* App icons */
#app .item .app-icon-container {
  box-sizing: border-box !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 17px !important;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.19),
    rgba(255, 255, 255, 0.07) 60%,
    rgba(30, 44, 60, 0.22)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19) !important;
}

#app .item .app-icon-container .app-icon,
#app .item .app-icon-container img,
#app .item .app-icon-container svg {
  max-width: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 18px rgba(0, 0, 0, 0.1));
}

/* Toolbar */
#app #config-buttons,
#config-buttons {
  position: fixed !important;
  top: 50% !important;
  bottom: auto !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: block !important;
  padding: 6px 0 !important;
  background: rgba(12, 18, 31, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.23) !important;
  border-right: 0 !important;
  border-radius: 21px 0 0 21px !important;
  box-shadow:
    -10px 12px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

#app #config-buttons a,
#app #config-buttons a:is(:hover, :focus, :active, .active),
#config-buttons a,
#config-buttons a:is(:hover, :focus, :active, .active) {
  color: #f7f9ff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Prevent hover pseudo-elements from spilling outside the toolbar. */
#config-buttons a::before,
#config-buttons a::after,
#config-buttons a:hover::before,
#config-buttons a:hover::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  #app .item,
  #config-buttons a {
    transition: none !important;
  }

  #app .item:hover {
    transform: none !important;
  }
}

JS :

/* Heimdall Frosted Glass - 3D spotlight */
(() => {
  "use strict";

  const MAX_TILT = 5; // Maximum rotation in degrees.
  let activeCard = null;
  let pointerX = 0;
  let pointerY = 0;
  let framePending = false;

  // Restore the default card orientation and gradient position.
  function reset(card) {
    if (!card) return;
    card.style.setProperty("--mouse-x", "50%");
    card.style.setProperty("--mouse-y", "50%");
    card.style.setProperty("--glass-x", "50%");
    card.style.setProperty("--glass-y", "50%");
    card.style.setProperty("--glass-angle", "140deg");
    card.style.setProperty("--glass-shift", "0%");
    card.style.setProperty("--tilt-x", "0deg");
    card.style.setProperty("--tilt-y", "0deg");
    card.style.setProperty("--spotlight", "0");
  }

  // Update card lighting and 3D tilt once per animation frame.
  function render() {
    framePending = false;
    if (!activeCard?.isConnected) return;

    const rect = activeCard.getBoundingClientRect();
    if (!rect.width || !rect.height) return;

    const x = Math.max(0, Math.min(1, (pointerX - rect.left) / rect.width));
    const y = Math.max(0, Math.min(1, (pointerY - rect.top) / rect.height));

    const px = `${(x * 100).toFixed(2)}%`;
    const py = `${(y * 100).toFixed(2)}%`;
    const tiltX = `${((0.5 - y) * 2 * MAX_TILT).toFixed(2)}deg`;
    const tiltY = `${((x - 0.5) * 2 * MAX_TILT).toFixed(2)}deg`;
    const glassAngle = `${(140 + (x - 0.5) * 18 - (y - 0.5) * 10).toFixed(2)}deg`;
    const glassShift = `${((x - 0.5) * 10).toFixed(2)}%`;

    activeCard.style.setProperty("--mouse-x", px);
    activeCard.style.setProperty("--mouse-y", py);
    activeCard.style.setProperty("--glass-x", px);
    activeCard.style.setProperty("--glass-y", py);
    activeCard.style.setProperty("--glass-angle", glassAngle);
    activeCard.style.setProperty("--glass-shift", glassShift);
    activeCard.style.setProperty("--tilt-x", tiltX);
    activeCard.style.setProperty("--tilt-y", tiltY);
    activeCard.style.setProperty("--spotlight", "1");
  }

  // Event delegation also works for cards added after page load.
  document.addEventListener(
    "pointermove",
    (event) => {
      if (event.pointerType === "touch") return;

      const card = event.target.closest?.("#app .item") || null;
      if (card !== activeCard) {
        reset(activeCard);
        activeCard = card;
      }
      if (!card) return;

      pointerX = event.clientX;
      pointerY = event.clientY;
      if (!framePending) {
        framePending = true;
        requestAnimationFrame(render);
      }
    },
    { passive: true },
  );

  // Reset only when the pointer fully leaves the active card.
  document.addEventListener(
    "pointerout",
    (event) => {
      if (!activeCard?.contains(event.target)) return;
      if (event.relatedTarget && activeCard.contains(event.relatedTarget))
        return;
      reset(activeCard);
      activeCard = null;
    },
    { passive: true },
  );

  window.addEventListener("blur", () => {
    reset(activeCard);
    activeCard = null;
  });
})();