Gradientes

No Laboratório Belavista, o fundo do hero do cartaz mistura duas tintas. Não precisa exportar PNG: linear-gradient e amigos geram a imagem no CSS.

O exemplo está em pacote de exemplos/46-gradientes/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Gradiente linear, radial e cônico.
• Ângulos, palavras-chave to … e color stops.
• Gradiente como valor de background-image (é uma imagem).
• Empilhar vários gradientes.

Linear

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gradientes — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <header class="hero">
      <h1>Laboratório Belavista</h1>
      <p>Tipografia e cartaz em Recife</p>
    </header>
    <section class="selo-radial" aria-hidden="true"></section>
  </body>
</html>

.hero {
  padding: 3rem 1.5rem;
  color: #fff;
  background-color: #1a3a4a;
  background-image: linear-gradient(160deg, #1a3a4a 0%, #c45c26 100%);
}
.selo-radial {
  width: 8rem;
  height: 8rem;
  margin: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #c45c26 55%, #1a3a4a 100%);
}

Mude uma coisa. Troque 160deg por to right. Preveja a transição da esquerda para a direita. Recarregue. Confira.

Stops e camadas

Um stop marca onde a cor “segura”. Vários stops criam faixas. Um único argumento de cor gera bloco sólido — pouco útil.

.faixa {
  background: linear-gradient(
    to bottom,
    #1a3a4a 0%,
    #1a3a4a 40%,
    #c45c26 40%,
    #c45c26 100%
  );
}

repeating-linear-gradient e conic-gradient cobrem padrões e fatias de pizza. Empilhe com vírgulas: o primeiro da lista fica por cima.

.papel {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.7)),
    url("textura.svg");
}

Erro comum: colocar o gradiente só em background-color. Gradiente é imagem — use background-image ou o atalho background.

4 Radial e cônico, em uma frase

radial-gradient parte de um centro (bom para selos e holofotes). conic-gradient gira em torno de um ponto (fatias, medidores). No hero do Belavista, linear resolve a maior parte dos cartazes.

Arquivo no disco. Teste em 127.0.0.1. Contraste do texto sobre o gradiente importa: se a tinta falhar, o background-color de reserva ajuda.

Atividades

1. linear-gradient define cor de fundo ou imagem de fundo?
2. O que to right, #1a3a4a, #c45c26 descreve?
3. Por que manter background-color junto com um gradiente?

Respostas comentadas

1. Imagem gerada pelo CSS (background-image).
2. Gradiente horizontal do azul-escuro à esquerda até a tinta à direita.
3. Se o gradiente não carregar ou o navegador falhar, a cor sólida mantém contraste e legibilidade.