AI CSS Animations

Glass Profile Card

A frosted user card with an avatar, a pinging online dot, stats and follow buttons. On hover the card lifts and both orbs slide in underneath, so the frost thickens with color.

Also known as: glassmorphism profile card css, glass user card css, frosted profile card.

HTML

<div class="gls-glass-profile-card">
  <span class="gls-glass-profile-card-orb gls-glass-profile-card-orb-a" aria-hidden="true"></span>
  <span class="gls-glass-profile-card-orb gls-glass-profile-card-orb-b" aria-hidden="true"></span>
  <article class="gls-glass-profile-card-card">
    <span class="gls-glass-profile-card-avatar" aria-hidden="true">MR<i></i><i></i></span>
    <div class="gls-glass-profile-card-info">
      <h3 class="gls-glass-profile-card-name">Maya Ross</h3>
      <p class="gls-glass-profile-card-role">Product designer · 128 posts</p>
      <div class="gls-glass-profile-card-actions">
        <a class="gls-glass-profile-card-follow" href="#">Follow</a>
        <a class="gls-glass-profile-card-message" href="#">Message</a>
      </div>
    </div>
  </article>
</div>

CSS

.gls-glass-profile-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #3b0764));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-profile-card-orb {
  position: absolute;
  z-index: -1;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-profile-card-orb-a {
  left: 1.2em;
  top: 0.6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
}
.gls-glass-profile-card-orb-b {
  right: 1.2em;
  bottom: 0.6em;
  background: linear-gradient(135deg, #fcd34d, #ec4899);
}
.gls-glass-profile-card:hover .gls-glass-profile-card-orb-a { transform: translate(3.5em, 1em); }
.gls-glass-profile-card:hover .gls-glass-profile-card-orb-b { transform: translate(-3.5em, -1em); }
.gls-glass-profile-card-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 16em;
  padding: 1em 1.1em;
  border-radius: 1.1em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-profile-card:hover .gls-glass-profile-card-card { transform: translateY(-0.3em); }
.gls-glass-profile-card-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4em;
  height: 3.4em;
  border: 0.15em solid rgb(255 255 255 / 0.6);
  border-radius: 50%;
  background: linear-gradient(135deg, #fda4af, color-mix(in srgb, var(--c) 70%, #7c3aed));
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gls-glass-profile-card-avatar i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #22c55e;
}
.gls-glass-profile-card-avatar i:first-of-type { animation: gls-glass-profile-card-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.gls-glass-profile-card-avatar i:last-of-type { box-shadow: 0 0 0 0.12em rgb(255 255 255 / 0.9); }
.gls-glass-profile-card-info { min-width: 0; }
.gls-glass-profile-card-name { margin: 0; font-size: 0.95em; font-weight: 650; }
.gls-glass-profile-card-role {
  margin: 0.1em 0 0.6em;
  font-size: 0.66em;
  color: rgb(255 255 255 / 0.75);
}
.gls-glass-profile-card-actions { display: flex; gap: 0.4em; }
.gls-glass-profile-card-actions a {
  padding: 0.5em 0.9em;
  border-radius: 99em;
  font-size: 0.66em;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.gls-glass-profile-card-follow { background: #fff; color: color-mix(in srgb, var(--c) 60%, #0f172a); }
.gls-glass-profile-card-follow:hover { background: rgb(255 255 255 / 0.85); }
.gls-glass-profile-card-message {
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.gls-glass-profile-card-message:hover { background: rgb(255 255 255 / 0.22); }
.gls-glass-profile-card-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-profile-card-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gls-glass-profile-card, .gls-glass-profile-card *, .gls-glass-profile-card::before, .gls-glass-profile-card::after, .gls-glass-profile-card *::before, .gls-glass-profile-card *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<div class="group relative isolate grid h-48 w-[22rem] place-items-center overflow-hidden rounded-[1.25rem] bg-gradient-to-br from-slate-900 to-purple-950 font-sans text-white">
  <span class="absolute left-5 top-2.5 -z-10 h-24 w-24 rounded-full bg-gradient-to-br from-sky-300 to-blue-500 transition-transform duration-700 ease-out group-hover:translate-x-14 group-hover:translate-y-4" aria-hidden="true"></span>
  <span class="absolute bottom-2.5 right-5 -z-10 h-24 w-24 rounded-full bg-gradient-to-br from-amber-300 to-pink-500 transition-transform duration-700 ease-out group-hover:-translate-x-14 group-hover:-translate-y-4" aria-hidden="true"></span>
  <article class="relative flex w-64 items-center gap-3.5 rounded-2xl border border-white/45 bg-white/15 px-4 py-4 shadow-[0_0.5rem_1.5rem_-0.5rem_rgb(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.55)] backdrop-blur-[0.9rem] backdrop-saturate-150 transition-transform duration-500 ease-out group-hover:-translate-y-1">
    <span class="relative grid h-14 w-14 shrink-0 place-items-center rounded-full border-2 border-white/60 bg-gradient-to-br from-rose-300 to-violet-600 font-bold" aria-hidden="true">
      MR
      <span class="absolute bottom-0 right-0 h-3 w-3 animate-ping rounded-full bg-green-500"></span>
      <span class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-white/90"></span>
    </span>
    <div class="min-w-0">
      <h3 class="text-[0.95rem] font-semibold">Maya Ross</h3>
      <p class="mb-2.5 mt-0.5 text-[0.66rem] text-white/75">Product designer · 128 posts</p>
      <div class="flex gap-1.5 text-[0.66rem] font-semibold">
        <a href="#" class="rounded-full bg-white px-3.5 py-2 text-slate-900 transition-colors hover:bg-white/85">Follow</a>
        <a href="#" class="rounded-full border border-white/40 bg-white/10 px-3.5 py-2 transition-colors hover:bg-white/20">Message</a>
      </div>
    </div>
  </article>
</div>

Customizing this snippet

  • Color: set --gls-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --gls-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar glass effects

Glassmorphism Card
Glass Navbar
Glassmorphism Login Form
Frosted Glass Panel