Gradientes

The CSS Podcast - 021: Gradients

Imagine que você tem um site para criar e, na parte de cima, há uma introdução com um título, um resumo e um botão. O designer entregou um design com um plano de fundo roxo para essa introdução. O único problema é que o plano de fundo tem dois tons de roxo em um gradiente. Como fazer isso?

No início, você pode pensar que precisa exportar uma imagem da ferramenta de design para isso, mas é possível usar um linear-gradient em vez disso.

Um gradiente é uma imagem e pode ser usado em qualquer lugar onde as imagens podem ser usadas, mas é criado com CSS e é composto por cores, números e ângulos. Os gradientes do CSS permitem criar qualquer coisa, desde um gradiente suave entre duas cores até uma arte impressionante, misturando e repetindo vários gradientes.

Gradiente linear

A função linear-gradient() gera uma imagem de duas ou mais cores, progressivamente. Ele usa vários argumentos, mas na configuração mais simples, é possível transmitir algumas cores assim, e elas serão divididas automaticamente de maneira uniforme, enquanto são mescladas.

.my-element {
    background: linear-gradient(black, white);
}

Também é possível transmitir um ângulo ou palavras-chave que representem um ângulo. Se você optar por usar palavras-chave, especifique uma direção após a palavra-chave to. Isso significa que, se você quiser um gradiente preto e branco, que vai da esquerda (preto) para a direita (branco), especifique o ângulo como to right como o primeiro argumento.

.my-element {
    background: linear-gradient(to right, black, white);
}

Um valor de cor definido onde uma cor para e se mistura com as cores vizinhas. Para um gradiente que começa com um tom escuro de vermelho em um ângulo de 45 graus, em 30% do tamanho do gradiente mudando para um vermelho mais claro: ele fica assim.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Você pode adicionar quantas cores e paradas de cor quiser em um linear-gradient(), e pode sobrepor gradientes, separando cada um com uma vírgula.

Gradiente radial

Para criar um gradiente que irradia de forma circular, a função radial-gradient() ajuda. Ele é semelhante a linear-gradient(), mas, em vez de especificar um ângulo, você pode especificar uma posição e uma forma final. Se você especificar apenas cores, o radial-gradient() vai selecionar automaticamente a posição como center e selecionar um círculo ou uma elipse, dependendo do tamanho da caixa.

.my-element {
    background: radial-gradient(white, black);
}

A posição do gradiente é semelhante a background-position, usando palavras-chave e/ou valores numéricos. O tamanho do gradiente radial determina o tamanho da forma final do gradiente (círculo ou elipse) e, por padrão, será farthest-corner, o que significa que ele encontra exatamente o canto mais distante da caixa a partir do centro. Você também pode usar as seguintes palavras-chave:

• closest-corner vai encontrar o canto mais próximo do centro do gradiente.
• closest-side vai encontrar o lado da caixa mais próximo ao centro do gradiente.
• farthest-side vai fazer o oposto de closest-side.

Você pode adicionar quantas paradas de cor quiser, assim como no linear-gradient. Da mesma forma, você pode adicionar quantos radial-gradients quiser.

Gradiente cônico

Um gradiente cônico tem um ponto central na caixa e começa de cima (por padrão), e gira em um círculo de 360 graus.

.my-element {
    background: conic-gradient(white, black);
}

A função conic-gradient() aceita argumentos de posição e ângulo.

Por padrão, o ângulo é de 0 graus, começando na parte de cima, no centro. Se você definir o ângulo como 45deg, ele será o canto superior direito. O argumento de ângulo aceita qualquer tipo de valor de ângulo, como os gradientes linear e radial.

A posição é centralizada por padrão. Assim como nos gradientes lineares e radiais, o posicionamento pode ser baseado em palavras-chave ou definido com valores numéricos.

Você pode adicionar quantas paradas de cor quiser, assim como em outros tipos de gradiente. Um bom caso de uso para esse recurso, com gradientes cônicos, é renderizar gráficos de pizza com CSS.

Repetição e mixagem

Cada tipo de gradiente também tem um tipo de repetição. São eles repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient(). Elas são semelhantes às funções não repetidas e usam os mesmos argumentos. A diferença é que, se o gradiente definido puder ser repetido para preencher a caixa, com base nos dois tamanhos, ele será repetido.

Se o gradiente não parecer estar se repetindo, provavelmente você não definiu um comprimento para uma das paradas de cor. Por exemplo, é possível criar um plano de fundo listrado com um repeating-linear-gradient definindo as paradas de cor.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Também é possível misturar funções de gradiente em propriedades background e definir quantos gradientes quiser, assim como você faria com uma imagem de plano de fundo. Por exemplo, é possível misturar vários gradientes lineares ou dois gradientes lineares com um gradiente radial.

Recursos

• Conic.css: uma coleção útil de gradientes cônicos.
• Guia do MDN sobre gradientes
• Gerador de gradiente

Teste seu conhecimento

Teste seus conhecimentos sobre gradientes