Gradientes

Podcast do CSS - 021: gradientes

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

Inicialmente, você pode achar que vai precisar exportar uma imagem da sua ferramenta de design para isso, mas é possível usar um linear-gradient.

Um gradiente é uma imagem e pode ser usado em qualquer lugar em que imagens possam ser usadas, mas ele é criado com CSS e é composto por cores, números e ângulos. Os gradientes CSS permitem que você crie o que quiser, desde um gradiente suave entre duas cores, até obras de arte impressionantes, 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, você pode transmitir algumas cores como essa e os dividirá automaticamente de maneira uniforme ao mesmo tempo.

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

Você também pode transmitir um ângulo ou palavras-chave que representam um ângulo. Se você usar palavras-chave, especifique uma direção após to. Isso significa que, se você quiser um gradiente em preto e branco, que seja executado da esquerda (preta) para a direita (branca), especifique o ângulo como to right como o primeiro argumento.

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

Um valor de parada de cor definido onde uma cor para e se mistura com as vizinhas. Para um gradiente que começa com um tom escuro de vermelho em um ângulo de 45 graus, a 30% do tamanho do gradiente muda para um vermelho mais claro: o resultado é este.

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

É possível adicionar quantas cores e paradas de cor quiser em um linear-gradient(), e você pode colocar gradientes em camadas, separando cada gradiente com uma vírgula.

Gradiente radial

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

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

A posição do gradiente é semelhante à background-position com o uso de 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 do centro. Você também pode usar as seguintes palavras-chave:

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

É possível adicionar quantas paradas de cor você quiser, assim como no linear-gradient. Da mesma forma, você pode adicionar quantas radial-gradients quiser.

Gradiente cônico

Um gradiente cônico tem um ponto central na caixa e começa de cima (por padrão), 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 é 0 grau, que começa no topo, no centro. Se você definisse o ângulo como 45deg, ele seria o canto superior direito. O argumento "angle" aceita qualquer tipo de valor angular, como os gradientes lineares e radiais.

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

É possível adicionar quantas paradas de cor você quiser, 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 mistura

Cada tipo de gradiente também tem um tipo de repetição. Eles são repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient(). Elas são semelhantes às funções não repetitivas e recebem 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á.

Se o gradiente não parecer estar se repetindo, provavelmente não foi definido um comprimento para uma das paradas de cor. Por exemplo, você pode criar um plano de fundo listrado com um repeating-linear-gradient definindo comprimentos de parada 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, além de definir quantos gradientes quiser, assim como 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 da MDN para gradientes
• Gerador de gradiente

Teste seu conhecimento

Teste seus conhecimentos sobre gradientes