Player de Vidro Fosco

Player de música em vidro fosco flutuando sobre a própria capa desfocada em tela cheia.

CSS / TailwindPlayers & MídiaFácil

Preview ao vivoInterativo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <img class="fundo" src="https://picsum.photos/seed/aurora-album/600/600" alt="" />
    <div class="veu"></div>
    <article class="vidro">
      <img class="capa" src="https://picsum.photos/seed/aurora-album/600/600" alt="Capa do álbum" />
      <div class="info">
        <h3>Cidade Submersa</h3>
        <p>Helena Rios</p>
      </div>
      <div class="progresso">
        <div class="trilho"><div class="cheio"></div></div>
        <div class="tempos"><span>1:52</span><span>4:10</span></div>
      </div>
      <div class="controles">
        <button class="mini" aria-label="Aleatório">
          <svg viewBox="0 0 24 24"><path d="M17 4h4v4M21 4l-6.5 6.5M3 18l5-5M17 20h4v-4M21 20 3 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <button class="salto" aria-label="Anterior">
          <svg viewBox="0 0 24 24"><path d="M19 5v14L9 12l10-7ZM7 5v14" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <button class="play" aria-label="Pausar">
          <svg viewBox="0 0 24 24"><path d="M8 5h3v14H8zM14 5h3v14h-3z" fill="currentColor"/></svg>
        </button>
        <button class="salto" aria-label="Próxima">
          <svg viewBox="0 0 24 24"><path d="M5 5v14l10-7L5 5Zm12 0v14" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <button class="mini" aria-label="Repetir">
          <svg viewBox="0 0 24 24"><path d="M4 12a6 6 0 0 1 6-6h10m0 0-3-3m3 3-3 3m3 3a6 6 0 0 1-6 6H4m0 0 3 3m-3-3 3-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
      </div>
    </article>
  </body>
</html>

Prompt do efeito

Crie um player de música glassmorphism em HTML/CSS puro. A capa do álbum (imagem) aparece duas vezes: uma em tela cheia ao fundo com filter blur(70px) saturate(1.5) brightness(0.55) e scale(1.3), e outra nítida dentro do card com raio 18px e sombra profunda. O card de vidro: rgba branca 10%, backdrop-filter blur(24px), borda 1px rgba branca 28%, raio 28px, sombra 0 40px 80px -30px preta, flutuando devagar em translateY. Dentro: capa 210px, título e artista em branco, barra de progresso com trilho rgba branca 18% e preenchimento branco animando de 0 a 100% em 26s com bolinha via ::after e sombra suave, tempos 11px rgba branca 60%. Controles: shuffle e repeat fantasmas, prev/next em rgba branca 85%, play central 58px branco sólido com ícone escuro, hover scale 1.1 com cubic-bezier(0.34,1.56,0.64,1) e glow branco. Sem JavaScript.

#player#música#glassmorphism#blur#progresso

Efeitos relacionados

carregando

Player circular ultra-clean: capa girando dentro de um anel de progresso fino que se desenha.

Anel Minimalista

CSS / Tailwind

Player circular ultra-clean: capa girando dentro de um anel de progresso fino que se desenha.

carregando

Cassete tocando com bobinas girando, fita que passa de um lado ao outro e etiqueta manuscrita.

Fita Cassete Retrô

CSS / Tailwind

Cassete tocando com bobinas girando, fita que passa de um lado ao outro e etiqueta manuscrita.

carregando

Letra de música rolando em karaokê: a linha atual cresce nítida enquanto as outras ficam desfocadas.

Letra Sincronizada

CSS / Tailwind

Letra de música rolando em karaokê: a linha atual cresce nítida enquanto as outras ficam desfocadas.