Fundos em CSS: cores, gradientes e imagens em camadas

Um fundo em CSS é uma pilha de camadas num elemento. A propriedade background aceita uma lista de imagens e gradientes separados por vírgula, pintados com o primeiro por cima, mais uma única cor lá embaixo. Isso é tudo de que você precisa para uma foto de hero tingida, uma luz suave sobre um gradiente ou uma textura sobre a cor da marca, sem elementos extras nem wrappers. O resto é saber como o atalho lê os valores.

O atalho background, valor por valor

O atalho define até oito propriedades individuais de uma vez. As que você deixa de fora voltam ao valor padrão, o que é a causa mais comum dos bugs do tipo “por que o tamanho do meu fundo sumiu”.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Como as camadas de fundo se empilham

Liste as camadas de cima para baixo, separadas por vírgula. Cada camada pode ter sua própria posição, tamanho e repetição, informados na mesma ordem em cada propriedade individual. Só a última camada pode incluir uma cor. Pense nisso como olhar de cima para baixo através de uma pilha de papel vegetal.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Use transparent nas paradas externas para que as luzes se misturem ao que estiver embaixo. Para as formas em si, veja radial gradient em CSS e mesh gradient em CSS.

Um gradiente sobre uma imagem de fundo

O fundo em camadas mais útil tinge uma foto para que as palavras por cima possam ser lidas. Coloque uma camada de gradiente primeiro e a imagem depois. Um gradiente escuro onde fica o texto e transparente no resto preserva muito mais da foto do que uma sobreposição escura chapada.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Sobreposição em gradiente traz mais receitas de sobreposição, e texto sobre imagem explica quando mover as palavras em vez de escurecer a imagem.

background-size, position e repeat

• cover preenche a caixa e corta o que transborda. Certo para fotos e heros sangrados.
• contain encaixa a imagem inteira dentro e deixa espaços. Certo para logos e ilustrações que não podem ser cortados.
• Combine cover com um background-position intencional, como 50% 30%, para que o corte mantenha à vista o rosto da pessoa ou o produto.
• Ladrilhos de textura pedem repeat e um tamanho fixo, por exemplo 200px 200px, para que a granulação fique igual em qualquer largura de tela.
• background-attachment: fixed cria um efeito parallax no desktop, mas muitos navegadores de celular o ignoram, então nunca dependa dele.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Mais uma propriedade individual merece seu lugar: background-clip: text corta o fundo no formato das letras, e é assim que se faz texto em gradiente no CSS. Reserve para palavras grandes de destaque, defina uma color sólida de reserva e veja texto em gradiente com CSS para o padrão completo.

Erros para evitar

Imagens de fundo responsivas e rápidas

image-set() deixa o navegador escolher entre formatos ou resoluções, mais ou menos como o srcset num img. E como as imagens de fundo só são descobertas depois que o CSS é processado, o fundo de um hero pode chegar atrasado; um preload no head resolve isso.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Muitas vezes o fundo mais rápido é nenhuma imagem. Gradientes em camadas não custam download, e um pequeno ladrilho de granulação acrescenta textura por poucos kilobytes. Desempenho de gradientes CSS e WebP vs PNG e JPG explicam os prós e contras. Se você prefere não ajustar luz e granulação à mão, um Mark do Gradiently entrega um fundo pronto e marcante no tamanho de hero de site de 1920×1080, com o mesmo visual dos seus posts nas redes.