Fundo da secção hero: gradientes ricos que carregam depressa

Um fundo hero é o gradiente, a imagem ou o vídeo por trás da primeira secção de uma página web. Define o ambiente de todo o site e, como é a maior coisa visível quando a página abre, decide muitas vezes a rapidez aparente da página. A opção mais rápida é um gradiente em CSS puro, que se descarrega como algumas linhas de texto e se mantém nítido em qualquer tamanho. As imagens e os vídeos podem ficar mais ricos, mas pedem cuidado com tamanhos, formatos e carregamento, como se explica abaixo.

Este guia compara as três abordagens e depois trata de tamanhos, recortes responsivos, código e contraste do título. Para o pormenor de desempenho por trás disto, lê desempenho dos gradientes CSS e vídeos de fundo em sites.

CSS, imagem ou vídeo: escolher um fundo hero

O hero contém normalmente o Largest Contentful Paint da página, o momento em que o conteúdo principal aparece. O web.dev considera bom um LCP de 2,5 segundos ou menos. Uma imagem ou um vídeo pesados no hero são a razão mais comum para uma página falhar essa meta, e é por isso que a opção mais leve que consegue o visual é quase sempre a certa.

Construir um hero com gradiente CSS

Sobrepor dois ou três gradientes leva-te surpreendentemente longe: um gradiente linear de base para a direção geral e depois brilhos radiais suaves para a luz. Mistura em OKLCH para manter as cores fortes vivas. O resultado aparece de imediato e nunca precisa de um ficheiro maior para ecrãs maiores.

.hero {
  min-height: min(92svh, 900px);
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vw, 8rem) 1.5rem;
  color: #fbf8ff;
  background-color: #1b1240; /* fallback while gradients paint */
  background-image:
    radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%),
    linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c);
}

.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}

Para evitar que um hero em CSS pareça uma predefinição genérica, junta textura. Uma camada fina de ruído SVG sobre o gradiente esconde as faixas em ecrãs grandes e dá à cor uma sensação de material; textura de ruído em CSS mostra como. Para cor mais rica com vários pontos, os gradientes de malha em CSS sobrepõem mais brilhos.

Tamanho e formatos da imagem de fundo hero

Se o hero precisa de uma imagem, cria um original de 1920 por 1080 e exporta versões mais pequenas para ecrãs mais pequenos. Serve formatos modernos: AVIF e WebP costumam ser muito mais pequenos do que JPEG com a mesma qualidade visual, com JPEG como alternativa. Carrega o hero de imediato e diz ao navegador que é importante.

<picture>
  <source type="image/avif"
          srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
          sizes="100vw">
  <source type="image/webp"
          srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
          sizes="100vw">
  <img src="/hero-1920.jpg"
       alt=""
       width="1920" height="1080"
       fetchpriority="high"
       decoding="async"
       class="hero-bg">
</picture>

Recortes responsivos para fundos hero

Um hero 16:9 num telemóvel passa a ser uma fatia alta e estreita. Com object-fit: cover, o navegador recorta a partir do centro por predefinição, o que pode cortar a parte que importa. Define object-position para manter a zona de interesse, ou serve um recorte separado e mais alto para ecrãs pequenos com um atributo media num source.

Computador 16:9

1920 × 1080

Tablet, cerca de 4:3

1600 × 1200

Telemóvel, alto

1080 × 1920

É aqui que os gradientes CSS brilham: os brilhos são posicionados em percentagens, por isso acompanham a forma. Também podes mudar as posições num ponto de quebra, por exemplo passando o brilho principal do canto superior direito no computador para o centro do topo no telemóvel, onde o título se empilha.

Contraste do título sobre um fundo hero

Verifica o contraste no ponto mais claro por trás do título, não na média, e aponta para pelo menos 4.5:1 no texto mais pequeno e 3:1 nos títulos grandes. Texto sobre gradiente explica o método, e texto sobre imagem trata dos heros com fotografia.

Se criares o hero na Gradiently, um Mark é desenhado ao vivo em 1920 por 1080 ou em qualquer tamanho personalizado e desloca a sua zona mais calma para trás das tuas palavras. Exporta um PNG ou JPEG até três vezes o tamanho do design para imagens nítidas em ecrãs de alta densidade, ou um ciclo de 5 a 30 segundos para um hero com vídeo. Lembra-te de usar o mesmo visual na tua imagem Open Graph, para que as ligações partilhadas condigam com a página.