Fundo de hero para sites: gradientes ricos que carregam rápido

Um fundo de hero é o gradiente, a imagem ou o vídeo atrás da primeira seção de uma página web, o banner principal. Ele define o clima do site inteiro e, por ser a maior coisa visível quando a página abre, muitas vezes decide o quanto ela parece rápida. A opção mais rápida é um gradiente em CSS puro, que é baixado como algumas linhas de texto e continua nítido em qualquer tamanho. Imagens e vídeos podem parecer mais ricos, mas exigem cuidado com tamanho, formato e carregamento, como mostramos abaixo.

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

CSS, imagem ou vídeo: como escolher o fundo do hero

O hero costuma conter 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 de hero pesado é o motivo mais comum para uma página não chegar lá, e é por isso que a opção mais leve que alcança o visual é quase sempre a certa.

Como criar um hero com gradiente CSS

Empilhar dois ou três gradientes leva você surpreendentemente longe: um gradiente linear de base para a direção geral e depois brilhos radiais suaves para a luz. Faça a mistura em OKLCH para manter as cores fortes vivas. O resultado aparece na hora e nunca precisa de um arquivo maior para telas 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 que um hero em CSS não pareça uma predefinição genérica, acrescente textura. Uma camada fina de ruído em SVG sobre o gradiente esconde o banding em telas grandes e dá à cor uma sensação de material; textura de ruído em CSS mostra como. Para uma cor mais rica, com vários pontos, os gradientes mesh em CSS empilham mais brilhos.

Tamanho e formatos da imagem de fundo do hero

Se o hero precisar de uma imagem, crie um original de 1920 por 1080 e exporte versões menores para telas menores. Sirva formatos modernos: AVIF e WebP costumam ser bem menores que JPEG com a mesma qualidade visual, com o JPEG como reserva. Carregue o hero de imediato e avise ao navegador que ele é 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 de hero

Um hero 16:9 vira uma fatia alta e estreita no celular. Com object-fit: cover, o navegador recorta a partir do centro por padrão, o que pode cortar a parte que importa. Defina object-position para manter a área de foco ou sirva um recorte separado, mais alto, para telas pequenas com um atributo media em um source.

Desktop 16:9

1920 × 1080

Tablet, cerca de 4:3

1600 × 1200

Celular, vertical

1080 × 1920

É aqui que os gradientes CSS brilham: os brilhos são posicionados em porcentagens, então se movem com o formato. Você também pode mudar as posições em um breakpoint, por exemplo levando o brilho principal do canto superior direito no desktop para o centro superior no celular, onde o título fica empilhado.

Contraste do título sobre o fundo do hero

Confira o contraste no ponto mais claro atrás do título, não na média, e busque pelo menos 4,5:1 para texto menor e 3:1 para títulos grandes. Texto sobre gradiente explica o método, e texto sobre imagem trata de heros com foto.

Se você criar o hero no Gradiently, um Mark é renderizado ao vivo em 1920 por 1080 ou em qualquer tamanho personalizado e move a região mais calma dele para trás das suas palavras. Exporte um PNG ou JPEG em até três vezes o tamanho do design para imagens nítidas em telas de alta densidade, ou um loop de 5 a 30 segundos para um hero em vídeo. Lembre de usar o mesmo visual na sua imagem Open Graph, para que os links compartilhados combinem com a página.