Gradientes CSS: Transições de cores suaves

Descubra como criar transições de cores elegantes com gradientes lineares e radiais.

Você já aprendeu a preencher o fundo de um elemento com uma cor sólida (background-color) ou com uma imagem (background-image). Mas e se você quiser um fundo que transita suavemente de uma cor para outra, ou até mesmo entre várias cores?

É para isso que servem os Gradientes CSS. Eles permitem criar transições de cores suaves, sem a necessidade de usar arquivos de imagem, o que torna seu site mais leve e rápido.

Pense nos gradientes como um arco-íris que você pode personalizar, escolhendo as cores e a direção da transição.

Existem dois tipos principais de gradientes no CSS:

  1. Gradientes Lineares (linear-gradient): As cores mudam em uma linha reta.
  2. Gradientes Radiais (radial-gradient): As cores mudam a partir de um ponto central, espalhando-se para fora.

Ambos são usados como valores para a propriedade background-image.

1. Gradientes Lineares (linear-gradient)

Os gradientes lineares criam uma transição de cores ao longo de uma linha reta.

Sintaxe Básica:

background-image: linear-gradient(direção, cor1, cor2, ...);
  • direção (opcional): Define a direção da transição. Pode ser:
    • Palavras-chave: to top, to bottom (padrão), to left, to right.
    • Cantos: to top left, to bottom right, etc.
    • Ângulo: Um valor em graus (ex: 45deg, 90deg). 0deg é para cima, 90deg é para a direita.
  • cor1, cor2, ...: As cores que você quer usar na transição. Você pode usar qualquer formato de cor (nomes, hex, RGB, HSL, com ou sem Alpha).

Exemplos de Gradientes Lineares:

/* Gradiente básico de cima para baixo (padrão) */
.box-linear-1 {
  background-image: linear-gradient(red, yellow); /* Do vermelho para o amarelo */
}

/* Gradiente da esquerda para a direita */
.box-linear-2 {
  background-image: linear-gradient(to right, blue, green); /* Do azul para o verde */
}

/* Gradiente diagonal (canto superior esquerdo para inferior direito) */
.box-linear-3 {
  background-image: linear-gradient(to bottom right, purple, orange);
}

/* Gradiente com ângulo */
.box-linear-4 {
  background-image: linear-gradient(45deg, #FF00FF, #00FFFF); /* Magenta para Ciano em 45 graus */
}

/* Gradiente com múltiplas cores e paradas de cor (color stops) */
.box-linear-5 {
  background-image: linear-gradient(to right, red 0%, yellow 50%, green 100%);
  /* Começa vermelho, 50% do caminho é amarelo, termina verde */
}

/* Gradiente com transparência */
.box-linear-6 {
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
  /* Transiciona de vermelho transparente para vermelho opaco */
}

2. Gradientes Radiais (radial-gradient)

Os gradientes radiais criam uma transição de cores que se espalha a partir de um ponto central.

Sintaxe Básica:

background-image: radial-gradient(forma tamanho at posição, cor1, cor2, ...);
  • forma (opcional): Define a forma do gradiente. Pode ser circle (círculo) ou ellipse (elipse, padrão).
  • tamanho (opcional): Define o tamanho do gradiente. Pode ser:
    • closest-corner (padrão): O gradiente termina no canto mais próximo.
    • farthest-corner: O gradiente termina no canto mais distante.
    • closest-side: O gradiente termina no lado mais próximo.
    • farthest-side: O gradiente termina no lado mais distante.
    • Valores de comprimento (ex: 60px, 50%).
  • at posição (opcional): Define a posição do centro do gradiente. Usa os mesmos valores de background-position (ex: at center, at 20% 30%).
  • cor1, cor2, ...: As cores que você quer usar na transição, com suas paradas de cor opcionais.

Exemplos de Gradientes Radiais:

/* Gradiente radial básico do centro para fora */
.box-radial-1 {
  background-image: radial-gradient(white, black); /* Do branco para o preto */
}

/* Gradiente radial com forma de círculo */
.box-radial-2 {
  background-image: radial-gradient(circle, yellow, orange);
}

/* Gradiente radial com posição do centro */
.box-radial-3 {
  background-image: radial-gradient(at top left, blue, purple); /* Começa no canto superior esquerdo */
}

/* Gradiente radial com tamanho e múltiplas cores */
.box-radial-4 {
  background-image: radial-gradient(circle 60px at center, red 0%, yellow 50%, green 100%);
  /* Círculo de 60px, do vermelho para o amarelo e depois para o verde */
}

Repetição de Gradientes

Assim como as imagens de fundo, os gradientes podem ser repetidos usando background-repeat. Isso é útil para criar padrões complexos.

  • repeating-linear-gradient()
  • repeating-radial-gradient()

Essas funções criam gradientes que se repetem automaticamente, sem a necessidade de definir background-repeat: repeat;.

Combinando Gradientes com background-color e Múltiplos Fundos

  • Fallback: Sempre defina uma background-color sólida como fallback para navegadores que não suportam gradientes (embora o suporte seja quase universal hoje em dia).
  • Múltiplos Fundos: Você pode combinar gradientes com outras imagens de fundo ou com outros gradientes, separando-os por vírgulas na propriedade background-image (ou na shorthand background).

Exemplo:

.box-combinado {
  background-image: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("https://via.placeholder.com/800x400/333/fff?text=Fundo+Imagem");
  background-size: cover;
  background-position: center;
  background-color: #555; /* Fallback */
}
/* Cria uma camada semitransparente sobre uma imagem de fundo */

Os gradientes CSS são uma ferramenta poderosa para adicionar profundidade, textura e interesse visual aos seus designs, mantendo o código limpo e otimizado.