Card Glassmorphism

Cartão de vidro fosco flutuando sobre orbes coloridos em laranja, rosa e azul.

CSS / TailwindCardsFácil

Preview ao vivoInterativo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <span class="orb o1"></span>
    <span class="orb o2"></span>
    <span class="orb o3"></span>
    <article class="glass">
      <span class="avatar"></span>
      <h3>Marina Duarte</h3>
      <p>Product Designer</p>
      <div class="row">
        <button class="solid">Seguir</button>
        <button class="ghost">Mensagem</button>
      </div>
    </article>
  </body>
</html>

Efeitos relacionados

carregando

Vidro fosco flutuando sobre orbes coloridas, com um reflexo suave que desliza no hover.

Botão de Vidro

CSS / Tailwind

Vidro fosco flutuando sobre orbes coloridas, com um reflexo suave que desliza no hover.

carregando

Card escuro com borda de gradiente cônico rosa-laranja girando sem parar e glow difuso atrás.

Borda Neon Rotativa

CSS / Tailwind

Card escuro com borda de gradiente cônico rosa-laranja girando sem parar e glow difuso atrás.

carregando

Destaque

Painel editorial cuja borda superior derrete em ondas líquidas animadas — tipografia repetida ao estilo poster.

Bordas Líquidas

CSS / Tailwind

Painel editorial cuja borda superior derrete em ondas líquidas animadas — tipografia repetida ao estilo poster.