AI CSS Animations

Glass Music Player

A frosted now playing card: album art, a progress bar that fills as the song plays, bouncing equalizer bars and glass controls that light up on hover. Progress is a scaleX transform.

Also known as: glassmorphism music player css, glass audio player ui, now playing widget css.

Midnight DriveNeon Coast

HTML

<div class="gls-glass-music-player">
  <span class="gls-glass-music-player-orb gls-glass-music-player-orb-a" aria-hidden="true"></span>
  <span class="gls-glass-music-player-orb gls-glass-music-player-orb-b" aria-hidden="true"></span>
  <div class="gls-glass-music-player-card">
    <span class="gls-glass-music-player-art" aria-hidden="true"></span>
    <div class="gls-glass-music-player-info">
      <div class="gls-glass-music-player-head">
        <span class="gls-glass-music-player-meta"><b>Midnight Drive</b><span>Neon Coast</span></span>
        <span class="gls-glass-music-player-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
      </div>
      <span class="gls-glass-music-player-bar" aria-hidden="true"><span></span></span>
      <span class="gls-glass-music-player-times" aria-hidden="true"><span>1:24</span><span>3:58</span></span>
      <div class="gls-glass-music-player-controls">
        <button type="button" aria-label="Previous"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h2v14H6zM20 5v14L9 12z"/></svg></button>
        <button class="gls-glass-music-player-play" type="button" aria-label="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg></button>
        <button type="button" aria-label="Next"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 5h2v14h-2zM4 5v14l11-7z"/></svg></button>
      </div>
    </div>
  </div>
</div>

CSS

.gls-glass-music-player {
  --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) 40%, #1e1b4b), color-mix(in srgb, var(--c) 25%, #831843));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-music-player-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-music-player-orb-a {
  left: 1.5em;
  top: -1em;
  width: 7em;
  height: 7em;
  background: linear-gradient(135deg, #f0abfc, var(--c));
  animation: gls-glass-music-player-orb 7s ease-in-out infinite alternate;
}
.gls-glass-music-player-orb-b {
  right: 2em;
  bottom: -1.5em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, #fde047, #fb7185);
  animation: gls-glass-music-player-orb 9s ease-in-out -4s infinite alternate-reverse;
}
.gls-glass-music-player-card {
  display: flex;
  gap: 0.9em;
  width: 17.5em;
  padding: 0.8em;
  border-radius: 1.2em;
  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);
}
.gls-glass-music-player-art {
  flex: none;
  width: 5.4em;
  height: 5.4em;
  border-radius: 0.8em;
  background:
    radial-gradient(circle at 50% 110%, #fde047 0 1.6em, transparent 1.65em),
    repeating-linear-gradient(180deg, transparent 0 0.3em, rgb(76 5 25 / 0.35) 0.3em 0.45em) 0 100% / 100% 45% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #1e1b4b), #db2777 70%, #fb923c);
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.5);
}
.gls-glass-music-player-info {
  display: grid;
  flex: 1;
  min-width: 0;
  align-content: space-between;
}
.gls-glass-music-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.gls-glass-music-player-meta { display: grid; }
.gls-glass-music-player-meta b { font-size: 0.85em; font-weight: 650; }
.gls-glass-music-player-meta span { font-size: 0.68em; color: rgb(255 255 255 / 0.72); }
.gls-glass-music-player-eq {
  display: flex;
  align-items: flex-end;
  gap: 0.12em;
  height: 0.9em;
  margin-top: 0.15em;
}
.gls-glass-music-player-eq i {
  width: 0.16em;
  height: 100%;
  border-radius: 0.1em;
  background: #fff;
  transform-origin: bottom;
  animation: gls-glass-music-player-eq 0.9s ease-in-out infinite alternate;
}
.gls-glass-music-player-eq i:nth-child(2) { animation-delay: -0.35s; }
.gls-glass-music-player-eq i:nth-child(3) { animation-delay: -0.6s; }
.gls-glass-music-player-eq i:nth-child(4) { animation-delay: -0.15s; }
.gls-glass-music-player-bar {
  position: relative;
  height: 0.28em;
  margin-top: 0.4em;
  overflow: hidden;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.25);
}
.gls-glass-music-player-bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  animation: gls-glass-music-player-progress 16s linear infinite;
}
.gls-glass-music-player-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.55em;
  color: rgb(255 255 255 / 0.7);
  font-variant-numeric: tabular-nums;
}
.gls-glass-music-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.gls-glass-music-player-controls button {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.gls-glass-music-player-controls svg { width: 0.9em; height: 0.9em; }
.gls-glass-music-player-controls button:hover { background: rgb(255 255 255 / 0.2); }
.gls-glass-music-player-controls button:active { transform: scale(0.9); }
.gls-glass-music-player-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.gls-glass-music-player-controls .gls-glass-music-player-play {
  width: 2.1em;
  height: 2.1em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 60%, #1e1b4b);
}
.gls-glass-music-player-controls .gls-glass-music-player-play:hover { background: #fff; transform: scale(1.08); }
@keyframes gls-glass-music-player-eq {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}
@keyframes gls-glass-music-player-progress {
  from { transform: scaleX(0.05); }
  to { transform: scaleX(1); }
}
@keyframes gls-glass-music-player-orb {
  to { transform: translate(2.5em, 1.5em) scale(1.12); }
}

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

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