Hero Aurora Boreal

Seção hero com véus de aurora (verde-água, violeta e azul) flutuando atrás do título.

CSS / TailwindHeroMédio

Preview ao vivoInterativo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="hero">
      <span class="veil v1"></span>
      <span class="veil v2"></span>
      <span class="veil v3"></span>
      <div class="content">
        <p class="eyebrow">Lançamento 2026</p>
        <h1>Construa algo <em>extraordinário</em></h1>
        <p class="sub">
          Uma plataforma pensada para times que querem sair do comum
          e entregar experiências inesquecíveis.
        </p>
        <button class="cta">Começar de graça</button>
      </div>
    </section>
  </body>
</html>

Efeitos relacionados

carregando

Hero escuro com um disco de conic-gradient girando suave atrás do título, como um farol de cores.

Hero Gradiente Cônico

CSS / Tailwind

Hero escuro com um disco de conic-gradient girando suave atrás do título, como um farol de cores.

carregando

Hero escuro com faixas de aurora deslizando atrás de um painel de vidro fosco e navbar glass minimalista.

Hero Aurora no Vidro

CSS / Tailwind

Hero escuro com faixas de aurora deslizando atrás de um painel de vidro fosco e navbar glass minimalista.

carregando

Hero com gradiente quente vibrante, textura de ruído animada estilo filme e vinheta cinematográfica.

Hero Noise & Grain

CSS / Tailwind

Hero com gradiente quente vibrante, textura de ruído animada estilo filme e vinheta cinematográfica.