# Fundo de hero para sites: gradientes ricos que carregam rápido [Canonical HTML page](https://gradiently.design/pt-br/guide/website-hero-background) O hero é onde um site causa a primeira impressão, e onde ele mais costuma ficar lento. Um hero com gradiente pode ser ao mesmo tempo a coisa mais rica e a mais leve da página, se for feito do jeito certo. ## The short version - O fundo do hero é a imagem, o gradiente ou o vídeo atrás da primeira seção de uma página web, e muitas vezes é o elemento que decide o quanto a página parece rápida. - Gradientes em CSS puro não acrescentam quase nada ao download e escalam perfeitamente para qualquer tela, o que faz deles o fundo de hero mais rápido. - Heros com imagem devem usar um original de 1920 por 1080, formatos modernos como AVIF ou WebP, tamanhos responsivos, e nunca devem ter carregamento lento. - Heros com vídeo precisam de uma imagem de pôster, reprodução automática muda e inline e uma alternativa parada para quem prefere movimento reduzido. - Qualquer que seja o fundo, o título precisa de uma área calma com contraste forte em todos os tamanhos de tela. 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](https://gradiently.design/pt-br/guide/css-gradient-performance) e [vídeos de fundo em sites](https://gradiently.design/pt-br/guide/video-background-website). ## CSS, imagem ou vídeo: como escolher o fundo do hero | Abordagem | Peso do download | Visual | Melhor para | | --- | --- | --- | --- | | Gradiente CSS | Quase nenhum: faz parte da sua folha de estilo | Cor suave, brilhos, meshes delicados | Sites rápidos, páginas de produto, marcas construídas em cor | | Imagem (AVIF, WebP, JPEG) | Moderado: depende do tamanho e do formato | Qualquer coisa: textura, fotografia, grão | Materiais ricos, fotos, arte complexa | | Vídeo | Pesado: geralmente o maior arquivo da página | Movimento, profundidade, atmosfera | Lançamentos e marcas em que o movimento é o ponto | | WebGL ou canvas | Script mais custo de renderização | Cor viva e interativa | Páginas principais com orçamento de desempenho para isso | Comece pelo topo e só desça quando o design realmente precisar do que a próxima opção acrescenta. 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](https://web.dev/articles/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. ```css .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; } ``` Um hero em CSS com camadas: dois brilhos sobre um gradiente de base, com uma cor sólida de reserva. Pesa algumas centenas de bytes e preenche qualquer tela. Brilho do hero, aproximado em uma camada: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` O brilho rosa e o fundo violeta profundo do código acima, desenhados como um único gradiente radial para você ver o clima. 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](https://gradiently.design/pt-br/guide/css-noise-texture) mostra como. Para uma cor mais rica, com vários pontos, os [gradientes mesh em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient) 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. ```html ``` Uma imagem de hero responsiva: formatos modernos primeiro, dimensões explícitas para evitar deslocamento de layout, `fetchpriority="high"` e nada de `loading="lazy"`. O texto alternativo vazio marca a imagem como decorativa. > **Nunca use carregamento lento no hero** O `loading="lazy"` atrasa as imagens até que estejam perto da área visível. O hero já está na área visível, então o carregamento lento só faz o conteúdo principal da página aparecer mais tarde. ## 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 O mesmo hero em três formatos. Os gradientes se adaptam sozinhos; as imagens precisam de um ponto de foco escolhido ou de um recorte separado para celular. É 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 ### Evite - Um título atravessando o brilho mais claro - Contraste conferido só no desktop - Uma camada escura sobre a imagem inteira para salvar o texto - Texto de pouco contraste sobre um gradiente de meio-tom ### Faça - Brilhos posicionados longe do título - Contraste conferido em todos os breakpoints - Um scrim suave só onde ficam as palavras - Algo claramente escuro ou claramente claro atrás do texto 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](https://gradiently.design/pt-br/guide/text-on-gradient) explica o método, e [texto sobre imagem](https://gradiently.design/pt-br/guide/text-over-image) 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](https://gradiently.design/pt-br/guide/open-graph-image-size), para que os links compartilhados combinem com a página. ## FAQ ### Qual deve ser o tamanho da imagem de fundo do hero? Crie um original de 1920 por 1080 e sirva versões menores para telas menores com `srcset`. Use AVIF ou WebP com JPEG como reserva. ### Um gradiente CSS é mais rápido que uma imagem de hero? É. Um gradiente CSS são algumas linhas na sua folha de estilo, sem nada a mais para baixar, e continua nítido em qualquer tamanho. Imagens e vídeos acrescentam arquivos que precisam carregar antes de o hero parecer pronto. ### Devo usar carregamento lento na imagem do hero? Não. O hero está visível quando a página abre, então o carregamento lento só o atrasa. Carregue de imediato, acrescente `fetchpriority="high"` e defina a largura e a altura. ### Como mantenho o título do hero legível? Posicione as áreas claras longe das palavras, use um scrim suave só atrás do título se precisar e confira o contraste em todos os tamanhos de tela.