Glassmorphism

Frosted glass panels floating over colorful gradients — translucency, blur, and subtle borders define this aesthetic.

html css javascript

Targets: JS HTML

Code

/* ============================================================
   GLASSMORPHISM — Frosted Glass UI Showcase
   Vivid gradient bg + translucent blur panels
   ============================================================ */

:root {
  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-strong: rgba(255, 255, 255, 0.22);
  --glass-bg-subtle: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-border-strong: rgba(255, 255, 255, 0.45);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.25);

  /* Text */
  --text-white: #ffffff;
  --text-faded: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.4);

  /* Solid button */
  --btn-solid-bg: #ffffff;
  --btn-solid-text: #4a3f8a;

  --radius-card: 24px;
  --radius-pill: 50px;
  --font: "Poppins", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font);
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f64f59 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 60px;
  position: relative;
  overflow-x: hidden;
}

/* ── Background blobs ── */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.blob-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: -120px;
  background: rgba(102, 126, 234, 0.55);
  opacity: 0.5;
}

.blob-2 {
  width: 400px;
  height: 400px;
  top: 40%;
  right: -80px;
  background: rgba(246, 79, 89, 0.5);
  opacity: 0.4;
  animation: blob-drift 14s ease-in-out infinite alternate;
}

.blob-3 {
  width: 350px;
  height: 350px;
  bottom: -60px;
  left: 30%;
  background: rgba(118, 75, 162, 0.55);
  opacity: 0.45;
  animation: blob-drift 10s ease-in-out infinite alternate-reverse;
}

@keyframes blob-drift {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-40px) scale(1.08);
  }
}

/* ── Header ── */
.glass-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 36px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-white);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.header-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.header-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
  max-width: 340px;
}

/* ── Main layout ── */
.page-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 460px;
  padding: 0 24px;
}

/* ── Glass Card ── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  padding: 24px 24px 22px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lg);
}

.card-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}

/* ── Profile Card ── */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 24px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faded);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.profile-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-white);
  letter-spacing: -0.3px;
}

.profile-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 300;
  margin-top: -8px;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 20px;
  width: 100%;
  justify-content: space-around;
  margin-top: 4px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
}

.stat-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.stat-sep {
  width: 1px;
  height: 30px;
  background: var(--glass-border);
}

/* ── Buttons ── */
.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  outline: none;
}

/* Solid — punchy contrast against glass */
.btn-solid {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-text);
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn-solid:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Glass — same material as card */
.btn-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-glass:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.12);
}

/* Ghost — border only */
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--glass-border-strong);
  color: var(--text-white);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--glass-bg-subtle);
  border-color: var(--text-white);
}

.btn-ghost:active {
  background: var(--glass-bg);
}

/* Focus */
.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

/* ── Input ── */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
  transition: color 0.2s ease;
}

.glass-input {
  width: 100%;
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 16px 12px 42px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-white);
  outline: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.glass-input::placeholder {
  color: var(--text-dim);
}

.glass-input:focus {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.12);
}

.input-wrap:focus-within .input-icon {
  color: var(--text-faded);
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: default;
  user-select: none;
  transition: all 0.2s ease;
}

.badge:hover {
  background: var(--glass-bg);
  color: var(--text-white);
  border-color: var(--glass-border-strong);
}

.badge-active {
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-white);
  border-color: var(--glass-border-strong);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .button-row {
    flex-direction: column;
  }
  .btn {
    justify-content: center;
  }
  .page-main {
    padding: 0 16px;
  }
  .header-title {
    font-size: 1.7rem;
  }
}

/* ============================================================
   Glassmorphism — Interactive Effects
   Mouse parallax on blobs, badge toggle, button shimmer
   ============================================================ */

(function () {
  "use strict";

  // ── Mouse parallax on background blobs ─────────────────────
  const blob1 = document.querySelector(".blob-1");
  const blob2 = document.querySelector(".blob-2");
  const blob3 = document.querySelector(".blob-3");

  let ticking = false;

  document.addEventListener("mousemove", (e) => {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const xRatio = e.clientX / window.innerWidth - 0.5;
      const yRatio = e.clientY / window.innerHeight - 0.5;

      if (blob1) blob1.style.transform = `translate(${xRatio * 30}px, ${yRatio * 20}px)`;
      if (blob2) blob2.style.transform = `translate(${xRatio * -25}px, ${yRatio * -18}px)`;
      if (blob3) blob3.style.transform = `translate(${xRatio * 20}px, ${yRatio * 25}px)`;

      ticking = false;
    });
  });

  // ── Badge toggle ────────────────────────────────────────────
  const badges = document.querySelectorAll(".badge");
  badges.forEach((badge) => {
    badge.addEventListener("click", () => {
      badge.classList.toggle("badge-active");
    });
  });

  // ── Shimmer effect on solid button ─────────────────────────
  const primaryBtn = document.getElementById("btn-primary");

  if (primaryBtn) {
    // Inject shimmer styles
    const style = document.createElement("style");
    style.textContent = `
      .btn-solid {
        position: relative;
        overflow: hidden;
      }
      .btn-solid::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
          105deg,
          transparent 20%,
          rgba(255,255,255,0.45) 50%,
          transparent 80%
        );
        transition: none;
        pointer-events: none;
      }
      .btn-solid.shimmer-run::after {
        animation: glass-shimmer 0.55s ease-out forwards;
      }
      @keyframes glass-shimmer {
        from { left: -80%; }
        to   { left: 120%; }
      }
    `;
    document.head.appendChild(style);

    primaryBtn.addEventListener("mouseenter", function () {
      primaryBtn.classList.remove("shimmer-run");
      void primaryBtn.offsetWidth; // force reflow
      primaryBtn.classList.add("shimmer-run");
    });
  }

  // ── Glass card tilt on hover ────────────────────────────────
  const cards = document.querySelectorAll(".glass-card");

  cards.forEach((card) => {
    card.addEventListener("mousemove", (e) => {
      const rect = card.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / (rect.width / 2);
      const dy = (e.clientY - cy) / (rect.height / 2);
      card.style.transform = `perspective(700px) rotateX(${-dy * 3}deg) rotateY(${dx * 3}deg)`;
    });

    card.addEventListener("mouseleave", () => {
      card.style.transform = "";
    });
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glassmorphism — Frosted Glass UI</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Decorative background blobs -->
  <div class="blob blob-1" aria-hidden="true"></div>
  <div class="blob blob-2" aria-hidden="true"></div>
  <div class="blob blob-3" aria-hidden="true"></div>

  <!-- Header -->
  <header class="glass-header">
    <div class="glass-pill header-pill">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
      </svg>
      <span>Glassmorphism</span>
    </div>
    <div class="header-title-wrap">
      <h1 class="header-title">Frosted Glass UI</h1>
      <p class="header-tagline">Translucency, blur &amp; light — floating panels over vivid gradients</p>
    </div>
  </header>

  <!-- Main -->
  <main class="page-main">

    <!-- Profile Card -->
    <div class="glass-card profile-card">
      <div class="avatar-wrap">
        <div class="avatar">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
        </div>
      </div>
      <div class="profile-info">
        <h2 class="profile-name">Lena Hartmann</h2>
        <p class="profile-role">Creative Director</p>
      </div>
      <div class="profile-stats">
        <div class="stat">
          <span class="stat-value">312</span>
          <span class="stat-label">Projects</span>
        </div>
        <div class="stat-sep"></div>
        <div class="stat">
          <span class="stat-value">28k</span>
          <span class="stat-label">Followers</span>
        </div>
        <div class="stat-sep"></div>
        <div class="stat">
          <span class="stat-value">4.9</span>
          <span class="stat-label">Rating</span>
        </div>
      </div>
    </div>

    <!-- Buttons -->
    <div class="glass-card buttons-card">
      <p class="card-eyebrow">Actions</p>
      <div class="button-row">
        <button class="btn btn-solid" id="btn-primary">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          Get Started
        </button>
        <button class="btn btn-glass" id="btn-secondary">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
          Schedule
        </button>
        <button class="btn btn-ghost" id="btn-ghost">
          Learn More
        </button>
      </div>
    </div>

    <!-- Input -->
    <div class="glass-card input-card">
      <p class="card-eyebrow">Search</p>
      <div class="input-group">
        <label class="input-label" for="glass-input">Find a designer</label>
        <div class="input-wrap">
          <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
          <input class="glass-input" id="glass-input" type="text" placeholder="Search by name or skill…" />
        </div>
      </div>
    </div>

    <!-- Badges -->
    <div class="glass-card badges-card">
      <p class="card-eyebrow">Skills</p>
      <div class="badge-row">
        <span class="badge badge-active">UI Design</span>
        <span class="badge">Figma</span>
        <span class="badge">Prototyping</span>
        <span class="badge badge-active">Motion</span>
        <span class="badge">Research</span>
        <span class="badge">Systems</span>
      </div>
    </div>

  </main>

  <script src="script.js"></script>
</body>
</html>

Glassmorphism

Glassmorphism transforms UI panels into translucent frosted-glass surfaces that appear to float above a vivid, blurred backdrop. The aesthetic was popularized by Apple’s macOS Big Sur and has since become one of the defining visual languages of modern app design. Its power lies in three layered properties: a semi-transparent background, a backdrop-filter: blur() that simulates frosted glass, and a thin luminous border along the top and left edges that catches the simulated light.

The technique demands a rich, colorful background — plain white or black behind the glass produces no effect. The background is typically an expansive gradient or a photographic image, with large blurred color blobs reinforcing the depth illusion. All content on the glass panels uses white or near-white text to maintain legibility against the variable underlying colors.

The visual hierarchy is light and airy: nothing has hard edges or heavy shadows. Depth is communicated through transparency levels — panels closer to the “front” are slightly more opaque, while receding elements become more transparent. Interaction states use subtle brightness and opacity shifts rather than color changes.

Key characteristics

Every surface is a glass panel: background: rgba(255,255,255,0.15) + backdrop-filter: blur(20px)
Borders are luminous, not structural: border: 1px solid rgba(255,255,255,0.25)
Background must be colorful and layered — decorative blurred circles reinforce the effect
All text is white or near-white; no dark text on glass
Shadows are soft glows (box-shadow: 0 8px 32px rgba(0,0,0,0.2)) — never harsh
Interaction uses brightness and opacity changes, not color swap

When to use

Login and onboarding screens where visual impact matters
Dashboard overlays and modal dialogs
Marketing landing pages with hero sections
Mobile app UI where translucency signals depth and layering