# Fundo da secção hero: gradientes ricos que carregam depressa [Canonical HTML page](https://gradiently.design/pt-pt/guide/website-hero-background) A secção hero é onde um site causa a primeira impressão, e onde mais vezes fica lento. Um hero com gradiente pode ser ao mesmo tempo a coisa mais rica e a mais leve da página, se o construíres da forma certa. ## The short version - Um fundo hero é a imagem, o gradiente ou o vídeo por trás da primeira secção de uma página web, e é muitas vezes o elemento que decide a rapidez aparente da página. - Os gradientes em CSS puro quase não acrescentam nada ao download e escalam na perfeição para qualquer ecrã, o que faz deles o fundo hero mais rápido. - Os heros com imagem devem usar um original de 1920 por 1080, formatos modernos como AVIF ou WebP e tamanhos responsivos, e nunca devem ter carregamento diferido. - Os heros com vídeo precisam de uma imagem de capa, reprodução automática sem som e em linha, e uma alternativa parada para quem prefere menos movimento. - Seja qual for o fundo, o título precisa de uma zona calma com contraste forte em todos os tamanhos de ecrã. 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](https://gradiently.design/pt-pt/guide/css-gradient-performance) e [vídeos de fundo em sites](https://gradiently.design/pt-pt/guide/video-background-website). ## CSS, imagem ou vídeo: escolher um fundo hero | Abordagem | Peso do download | Aspeto | Melhor para | | --- | --- | --- | --- | | Gradiente CSS | Quase nenhum: faz parte da folha de estilos | Cor suave, brilhos, malhas suaves | Sites rápidos, páginas de produto, marcas construídas sobre a cor | | Imagem (AVIF, WebP, JPEG) | Moderado: depende do tamanho e do formato | Qualquer coisa: textura, fotografia, grão | Materiais ricos, fotografias, arte complexa | | Vídeo | Pesado: normalmente o maior ficheiro da página | Movimento, profundidade, ambiente | Lançamentos e marcas em que o movimento é o essencial | | WebGL ou canvas | Script mais o custo de renderização | Cor viva e interativa | Páginas principais com orçamento de desempenho para isso | Começa por cima e desce só quando o design precisa mesmo do que a opção seguinte acrescenta. 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](https://web.dev/articles/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. ```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 por camadas: dois brilhos sobre um gradiente de base, com uma cor sólida de reserva. Pesa algumas centenas de bytes e preenche qualquer ecrã. Brilho do hero, aproximado numa só 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 veres o ambiente. 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](https://gradiently.design/pt-pt/guide/css-noise-texture) mostra como. Para cor mais rica com vários pontos, os [gradientes de malha em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient) 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. ```html ``` Uma imagem hero responsiva: formatos modernos primeiro, dimensões explícitas para evitar mudanças de layout, `fetchpriority="high"` e nada de `loading="lazy"`. O texto alternativo vazio marca-a como decorativa. > **Nunca uses carregamento diferido no hero** `loading="lazy"` atrasa as imagens até estarem perto da área visível. O hero já está na área visível, por isso diferir o carregamento só faz o conteúdo principal da página aparecer mais tarde. ## 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 O mesmo hero em três formas. Os gradientes adaptam-se sozinhos; as imagens precisam de um ponto de interesse escolhido ou de um recorte separado para telemóveis. É 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 ### Evita - Um título a atravessar o brilho mais claro - Contraste verificado só no computador - Uma camada escura sobre a imagem inteira para salvar o texto - Texto com pouco contraste sobre um gradiente de tom médio ### Faz - Brilhos colocados longe do título - Contraste verificado em todos os pontos de quebra - Um sombreado suave só onde ficam as palavras - Claramente escuro ou claramente claro por trás do texto 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](https://gradiently.design/pt-pt/guide/text-on-gradient) explica o método, e [texto sobre imagem](https://gradiently.design/pt-pt/guide/text-over-image) 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](https://gradiently.design/pt-pt/guide/open-graph-image-size), para que as ligações partilhadas condigam com a página. ## FAQ ### Que tamanho deve ter uma imagem de fundo hero? Cria um original de 1920 por 1080 e serve versões mais pequenas a ecrãs mais pequenos com `srcset`. Usa AVIF ou WebP com JPEG como alternativa. ### Um gradiente CSS é mais rápido do que uma imagem hero? Sim. Um gradiente CSS são algumas linhas na folha de estilos sem nada extra para descarregar, e mantém-se nítido em todos os tamanhos. As imagens e os vídeos acrescentam ficheiros que têm de carregar antes de o hero parecer acabado. ### Devo usar carregamento diferido na imagem hero? Não. O hero está visível quando a página abre, por isso o carregamento diferido só o atrasa. Carrega-o de imediato, junta `fetchpriority="high"` e define a largura e a altura. ### Como mantenho legível o título de um hero? Põe as zonas claras longe das palavras, usa um sombreado suave só por trás do título se for preciso e verifica o contraste em todos os tamanhos de ecrã.