Gradientes

Podcast do CSS - 021: Gradientes

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

Um plano de fundo gradiente roxo escuro a claro com título, parágrafo e link.

Você pode pensar inicialmente que, para isso, precisará exportar uma imagem da ferramenta de design, mas é possível usar linear-gradient como alternativa.

Um gradiente é uma imagem e pode ser usado em qualquer lugar onde imagens possam ser usadas, mas é criada com CSS e composta de cores, números e ângulos. Os gradientes CSS permitem criar qualquer coisa, desde um gradiente suave entre duas cores, até obras de arte impressionantes, misturando e repetindo vários gradientes.

Gradiente linear

Compatibilidade com navegadores

Origem

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 passar algumas cores como esta e ele irá dividi-las automaticamente de maneira uniforme enquanto as mistura.

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

Você também pode passar um ângulo ou palavras-chave que representem um ângulo. Se você quiser usar palavras-chave, especifique uma direção após a palavra-chave to. Isso significa que, se você quer um gradiente em preto e branco, que vai 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 em que 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 45deg, quando 30% do tamanho do gradiente muda para um vermelho mais claro: o resultado 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 você pode colocar gradientes em cima uns dos outros, separando cada gradiente com uma vírgula.

Gradiente radial

Compatibilidade com navegadores

Origem

Para criar um gradiente que irradie de forma circular, o radial-gradient() função entra para ajudar. É semelhante a linear-gradient(), Porém, em vez de um ângulo, é possível especificar uma posição e uma forma final. Se você apenas especificar cores, o radial-gradient() selecionará automaticamente a posição como center. e selecione 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 ela se encontra exatamente no canto mais distante da caixa do centro. Você também pode usar as seguintes palavras-chave:

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

Você pode adicionar quantas paradas de cor quiser, assim como com o linear-gradient. Da mesma forma, você também pode adicionar quantas radial-gradients quiser.

Gradiente cônico

Compatibilidade com navegadores

Origem

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

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

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

Por padrão, o ângulo é 0 grau, começando no topo, no centro. Se você definir o ângulo como 45deg, ele será o canto superior direito. O argumento angle aceita qualquer tipo de valor de ângulo, como os gradientes lineares e radiais.

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

Você pode adicionar quantas paradas de cor desejar, como acontece com outros tipos de gradiente. Um bom caso de uso para esse recurso, com gradientes cônicos, é a renderização de gráficos de pizza com CSS.

Repetição e combinação

Cada tipo de gradiente também tem um tipo repetido. São repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient(). Elas são semelhantes às funções não repetitivas e têm os mesmos argumentos. A diferença é que, se o gradiente definido puder ser repetido para preencher a caixa, com base no tamanho deles,

Se o gradiente não parecer se repetir, você provavelmente não definiu um comprimento para uma das paradas de cor. Por exemplo: é possível criar um plano de fundo listrado com uma repeating-linear-gradient definindo o comprimento das 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, além de definir quantos gradientes quiser, 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 para gradientes
Gerador de gradiente

Teste seu conhecimento

Teste seu conhecimento sobre gradientes

Qual é o número mínimo de cores necessárias para criar um gradiente?

Tente novamente.

Elas podem ter a mesma cor e aparecer sólidas, mas sim, são necessárias pelo menos duas cores.

Tente novamente.

Os elementos podem ter vários gradientes no plano de fundo?

Verdadeiro

A propriedade background-image permite muitos gradientes, basta separá-los com uma vírgula.

Falso

Ah, mas elas podem!