22 CSS Transition Effects 17 / 22

Glassmorphism Hover Transition

Frost-reveal cards, layered depth buttons, profile cards with banner and avatar scale, and notification toasts with glass blur depth on hover.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="glass-bg"></div>
<div class="page">
  <h1>Glassmorphism Hover Transitions</h1>
  <p class="subtitle">Frost, blur & depth effects on hover</p>

  <!-- 1. Frost-reveal -->
  <section>
    <h2>Frost-reveal Cards</h2>
    <div class="frost-grid">
      <div class="frost-card"><div class="icon">✦</div><h3>Design System</h3><p>Unified tokens and components for consistent UI.</p></div>
      <div class="frost-card"><div class="icon">⚡</div><h3>Performance</h3><p>Sub-50ms interactions with optimised rendering.</p></div>
      <div class="frost-card"><div class="icon">🔒</div><h3>Security</h3><p>End-to-end encryption and zero-trust architecture.</p></div>
      <div class="frost-card"><div class="icon">🌐</div><h3>Global CDN</h3><p>Edge nodes in 180+ countries for instant delivery.</p></div>
    </div>
  </section>

  <!-- 2. Glass buttons -->
  <section>
    <h2>Layered Depth Buttons</h2>
    <div class="btn-row">
      <button class="glass-btn">Get Started</button>
      <button class="glass-btn accent">Upgrade Plan</button>
      <button class="glass-btn">Learn More</button>
      <button class="glass-btn">View Docs</button>
    </div>
  </section>

  <!-- 3. Profile cards -->
  <section>
    <h2>Profile Cards</h2>
    <div class="profile-grid">
      <div class="profile-card">
        <div class="profile-banner pb-1"></div>
        <div class="profile-body">
          <div class="profile-avatar">👩‍🎨</div>
          <div class="profile-name">Aria Chen</div>
          <div class="profile-role">Senior Designer</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">128</div><div class="stat-l">Projects</div></div>
            <div class="stat"><div class="stat-n">4.9k</div><div class="stat-l">Followers</div></div>
            <div class="stat"><div class="stat-n">312</div><div class="stat-l">Likes</div></div>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-banner pb-2"></div>
        <div class="profile-body">
          <div class="profile-avatar">👨‍💻</div>
          <div class="profile-name">Leo Marquez</div>
          <div class="profile-role">Full-Stack Engineer</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">94</div><div class="stat-l">Repos</div></div>
            <div class="stat"><div class="stat-n">2.1k</div><div class="stat-l">Stars</div></div>
            <div class="stat"><div class="stat-n">87</div><div class="stat-l">PRs</div></div>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-banner pb-3"></div>
        <div class="profile-body">
          <div class="profile-avatar">🧠</div>
          <div class="profile-name">Nova Singh</div>
          <div class="profile-role">ML Researcher</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">41</div><div class="stat-l">Papers</div></div>
            <div class="stat"><div class="stat-n">8.7k</div><div class="stat-l">Citations</div></div>
            <div class="stat"><div class="stat-n">19</div><div class="stat-l">Models</div></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 4. Toasts -->
  <section>
    <h2>Notification Toasts</h2>
    <div class="toast-stack">
      <div class="toast"><div class="toast-icon">✅</div><div class="toast-text"><strong>Deployment successful</strong><span>Production v2.4.1 is now live</span></div><div class="toast-time">just now</div></div>
      <div class="toast"><div class="toast-icon">⚠️</div><div class="toast-text"><strong>High memory usage</strong><span>Server node-03 at 89% capacity</span></div><div class="toast-time">2m ago</div></div>
      <div class="toast"><div class="toast-icon">💬</div><div class="toast-text"><strong>New comment</strong><span>Aria replied to your design review</span></div><div class="toast-time">5m ago</div></div>
      <div class="toast"><div class="toast-icon">🔔</div><div class="toast-text"><strong>Reminder</strong><span>Sprint planning starts in 30 minutes</span></div><div class="toast-time">12m ago</div></div>
    </div>
  </section>
</div>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0f0c29; min-height: 100vh; overflow-x: hidden; }

/* ── Shared animated background ── */
.glass-bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}
.glass-bg::before, .glass-bg::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.6;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
.glass-bg::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #7928ca, #ff0080);
  top: -150px; left: -100px;
}
.glass-bg::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #00d2ff, #3a47d5);
  bottom: -100px; right: -100px;
  animation-delay: -6s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}

.page { position: relative; z-index: 1; padding: 60px 40px; }
h1 { color: #fff; text-align: center; font-size: 2rem; margin-bottom: 8px; }
.subtitle { color: rgba(255,255,255,.5); text-align: center; margin-bottom: 50px; font-size: .95rem; }
section { margin-bottom: 70px; }
section > h2 { color: rgba(255,255,255,.7); font-size: .8rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 24px; }

/* ─────────────────────────────────────
   1. Frost-reveal cards
───────────────────────────────────── */
.frost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.frost-card {
  border-radius: 20px; padding: 32px 24px; cursor: default;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .4s, backdrop-filter .4s, border-color .4s, transform .4s, box-shadow .4s;
}
.frost-card:hover {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.frost-card .icon { font-size: 2.2rem; margin-bottom: 14px; }
.frost-card h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.frost-card p  { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.5; }

/* ─────────────────────────────────────
   2. Layered depth buttons
───────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.glass-btn {
  position: relative; overflow: hidden;
  padding: 14px 32px; border-radius: 50px; border: none; cursor: pointer;
  font-size: .95rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .2s;
}
.glass-btn::before {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.glass-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1) inset;
  transform: translateY(-2px);
}
.glass-btn:hover::before { opacity: 1; }
.glass-btn.accent { background: rgba(121, 40, 202, .35); border-color: rgba(121,40,202,.5); }
.glass-btn.accent:hover { background: rgba(121,40,202,.6); border-color: rgba(200,120,255,.6); box-shadow: 0 8px 32px rgba(121,40,202,.4); }

/* ─────────────────────────────────────
   3. Profile / feature card big
───────────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.profile-card {
  border-radius: 24px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, border-color .4s;
}
.profile-card:hover { transform: scale(1.03) translateY(-4px); border-color: rgba(255,255,255,.3); box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.profile-banner {
  height: 110px;
  transition: filter .4s;
}
.profile-card:hover .profile-banner { filter: brightness(1.2); }
.pb-1 { background: linear-gradient(135deg, #7928ca, #ff0080); }
.pb-2 { background: linear-gradient(135deg, #00d2ff, #3a47d5); }
.pb-3 { background: linear-gradient(135deg, #f7971e, #ffd200); }
.profile-body { padding: 20px; }
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  margin-top: -40px; margin-bottom: 12px;
  backdrop-filter: blur(10px);
  transition: border-color .4s, transform .4s;
}
.profile-card:hover .profile-avatar { border-color: rgba(255,255,255,.7); transform: scale(1.1); }
.profile-name { color: #fff; font-weight: 700; font-size: 1rem; }
.profile-role { color: rgba(255,255,255,.5); font-size: .8rem; margin-bottom: 14px; }
.profile-stats { display: flex; gap: 20px; }
.stat { text-align: center; }
.stat-n { color: #fff; font-weight: 700; font-size: 1rem; }
.stat-l { color: rgba(255,255,255,.45); font-size: .72rem; }

/* ─────────────────────────────────────
   4. Notification / toast strip
───────────────────────────────────── */
.toast-stack { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.toast:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
  transform: translateX(6px);
  box-shadow: -4px 0 0 rgba(255,255,255,.3), 0 8px 24px rgba(0,0,0,.2);
}
.toast-icon { font-size: 1.4rem; flex-shrink: 0; }
.toast-text strong { color: #fff; font-size: .9rem; display: block; }
.toast-text span   { color: rgba(255,255,255,.5); font-size: .8rem; }
.toast-time { margin-left: auto; color: rgba(255,255,255,.35); font-size: .75rem; white-space: nowrap; }

More from 22 CSS Transition Effects

Underline Animation HoverSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close TransitionPage Transition EffectRipple Effect on ClickNumber Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →