CSS gradient é um efeito degradê de variação de cores que podem ser aplicadas por meio de uma função CSS em elementos HTML. Basicamente, existem dois formatos de aplicação: a linear, que como o nome sugere, apresenta o efeito em forma horizontal, vertical ou inclinada; e o efeito radial, em que a cor é propagada a partir de um ponto central.

Existem diversas ferramentas online que criam códigos CSS, são as chamadas CSS gradient generator. Entretanto, é importante entender como esses recursos funcionam para explorar ao máximo todas as possibilidades de utilização. Para demonstrar como o gradiente trabalha, preparamos este post que contém os seguintes tópicos:

• O que é a propriedade CSS linear gradient?
• O que é a propriedade CSS radial gradient?
• Qual é a compatibilidade com os navegadores?

Continue com a gente e boa leitura!

O que é a propriedade CSS linear gradient?

A função linear-gradient() é utilizada em conjunto com propriedades que aceitam a aplicação de imagem, entre elas background-image, border-image, entre outras. Na prática, ela cria um efeito degradê em forma linear e é aplicada como uma imagem de fundo — CSS background gradient. Ela pode ser utilizada em qualquer elemento HTML, porém é preciso ao menos duas cores para que o efeito funcione.

Qual a sua sintaxe?

A sintaxe da função linear-gradient() CSS é:   

linear-gradient([ <angle> | to <direction> ], <start-color> [position], ..., <last-color> [position], ...)

No qual:

• angle: não é obrigatório e representa o ângulo, ou seja, a inclinação linear do efeito. O valor padrão é 180deg, que corresponde a 180 graus e indica o efeito na posição horizontal aplicado de cima para baixo;
• direction: representa a direção em que o efeito será aplicado. Os valores possíveis são left ou right para indicar o lado esquerdo ou direito e top ou bottom para representar o lado superior ou inferior do elemento;
• start-color, last-color…: indicam as cores que serão utilizadas para construir o efeito;
• position: valor opcional e representa a posição em relação ao elemento em que a cor será aplicada. É indicada em percentual e pode ser composta apenas pela posição inicial ou, também, pela posição final – o que permite a divisão das cores de forma sólida.

Definindo a direção do da transição gradiente

Como mencionamos, a função linear-gradient() deve ter duas ou mais cores para a aplicação do efeito. Existem diferentes formas de configurar como a transição de cores será feita. Confira como elas funcionam, a seguir.

De cima para baixo: default

Perceba, na sintaxe da função linear-gradient(), que os parâmetros angle ou direction e position são opcionais. Isso significa que existe um valor padrão predefinido pelos navegadores para eles. Portanto, se nada for informado, o sentido default do efeito será de cima para baixo, ou seja, a primeira cor será posicionada no topo do elemento e a segunda, na posição inferior.

Assim, se quisermos aplicar um efeito degradê de cima para baixo, não precisamos escrever a indicação “to bottom”, pois ela será aplicada automaticamente. Veja um código de exemplo em que o degradê será o mesmo nas duas alternativas:

background-image: linear-gradient(to bottom, green, black);
background-image: linear-gradient(green, black);

Também podemos inverter o sentido, ou seja, fazer com que a primeira cor fique na posição inferior em direção à parte superior do elemento. Nesse caso, precisamos indicar o valor do parâmetro tamanho como to top.

background-image: linear-gradient(to top, green, black);

Da esquerda para a direita: to right

A indicação to right significa que a primeira cor será aplicada no lado esquerdo do elemento em direção ao lado direito. Assim, o efeito será no sentido vertical. Já se quisermos que o degradê seja aplicado da direita para a esquerda, podemos utilizar o valor to left.

background-image: linear-gradient(to right, green, black);
background-image: linear-gradient(to left, green, black);

Diagonal: to bottom right

É possível combinar as direções para fazer efeitos em diagonal. Para isso, devemos indicar os cantos correspondentes. Ao utilizarmos o valor to bottom right, por exemplo, dizemos ao navegador para iniciar o efeito do lado superior esquerdo em direção ao inferior direito.

background-image: linear-gradient(to bottom right, green, black);

Também podemos combinar outros cantos do elemento para inverter a inclinação do efeito. Veja algumas possibilidades:

• to bottom left: para iniciar no canto superior direito em direção ao inferior esquerdo;
• to top right: para iniciar no canto inferior esquerdo em direção ao superior direito;
• to top left: para iniciar no canto inferior direito em direção ao superior esquerdo.

Definindo o ângulo do CSS gradient: angle

Outra forma de definir a direção em que o efeito será aplicado no elemento é a indicação do ângulo. Como mencionamos, o valor padrão é 180deg, que cria o efeito iniciando da parte superior em direção à parte inferior – isso representa uma linha horizontal e equivale à indicação to bottom.

A posição inicial, ou seja, o ângulo 0º, é equivalente à indicação to top, em que a cor inicial é posicionada na parte inferior em direção ao topo do elemento. Já o ângulo de 45º, por exemplo, corresponde ao valor top right, que inicia o efeito de baixo para cima e da esquerda para a direita. Veja alguns exemplos:

background-image: linear-gradient(45deg, green, red); /* igual a top right */
background-image: linear-gradient(top right, green, red); /* igual a 45deg */
background-image: linear-gradient(90deg, green, red);
background-image: linear-gradient(225deg, green, red);

Vale ressaltar que a linguagem de estilos CSS aceita as seguintes unidades de medidas para indicar a angulação:

• deg: que corresponde a uma volta de 360º;
• grad: em que a volta mede 400 grados;
• rad: a medida é feita em radianos e uma volta corresponde a 2π;
• turn: em que a volta equivale a 1 turn.

Usando várias cores no CSS gradiente

É possível utilizar diversas cores para construir o efeito degradê. Por padrão, a aplicação da cor é proporcional à quantidade de cores. Assim, se tivermos duas cores, elas serão divididas em 50% para cada uma. Já, se adicionarmos mais uma, a divisão automática corresponderá a 33,33% respectivamente e assim por diante.

Também podemos aplicar a função linear-gradient() de modo que ela não apresente o efeito de transição suave – ou seja, serão exibidas cores sólidas. Uma forma de fazer isso é definir os pontos iniciais e finais para cada cor intermediária, conforme o exemplo abaixo:

background-image: linear-gradient(white 30% ,green 30% 50%, white 50% 70%, green 70% ); /* efeito de cores sólidas */
background-image: linear-gradient(white, green, white, green); /* efeito com transição suave */
background-image: linear-gradient(white 20%, green 30%, white 50%, green 80% ); /* efeito com transição suave */

Usando transparência no CSS gradient

Para suavizar ainda mais o efeito de transição, podemos utilizar transparências com a função linear-gradient(). Para isso, devemos definir as cores com a função rgba(), em que o último parâmetro corresponde ao índice de transparência, que pode variar de 0 a 1. Dessa forma, podemos criar efeitos com a utilização da mesma cor, alterando apenas o nível de transparência. Veja um exemplo:

background-image: linear-gradient(rgba(30, 102, 7, 1), rgba(30, 102, 7, 0.2));

Também podemos utilizar a palavra transparent para indicar o efeito. Entretanto, nesse caso a transparência é aplicada totalmente no local correspondente, ou seja, não é possível indicar a intensidade como fizemos no exemplo acima.

background-image: linear-gradient(green, transparent, green);

Definindo a repetição do gradiente linear: repeating-linear-gradient()

A função repeating-linear-gradient() funciona semelhante à linear-gradient(), entretanto, o efeito é aplicado diversas vezes no elemento até o preenchimento do espaço disponível. Veja um exemplo de código:

background-image: repeating-linear-gradient(white 20%, green 30% ,black 40%);

O que é a propriedade CSS radial gradient?

A função radial-gradient() também cria um efeito de transição entre duas ou mais cores. A principal diferença em relação ao gradiente linear é que ela é aplicada a partir do ponto central do elemento e irradia de forma circular ou elíptica.

Qual é a sintaxe da função radial-gradient()?

A sintaxe da função radial-gradient() é:

radial-gradient([<shape>] || [<size>] [at <position>], <start-color> [<size>] [at <position>], ..., <last-color> [<size>] [at <position>]);

No qual:

• shape: correspondem ao formato do efeito, que pode ser circular (circle) ou elíptico (ellipse);
• size: corresponde ao tamanho do gradiente;
• position: indica a posição do efeito, o valor padrão é o centro do elemento;
• start-color: representa a cor inicial;
• last-color: indica a cor final.

Definindo o espaço de gradiente entre as cores

Se nada for definido, as cores são distribuídas de forma proporcional entre o espaço disponível no elemento. Para restringir esse valor, devemos indicar o percentual ou o tamanho em pixels que queremos atribuir no atributo size. Veja um exemplo:

background-image: radial-gradient(orange 20%,LightGoldenRodYellow 30%, blue);

Definindo a forma do gradiente: shape

A forma do gradiente pode ter dois valores específicos: circular (circle) ou elíptico (ellipse). Se nada for mencionado, o valor padrão é circle. Um complemento para a definição do formato é o uso do atributo size, que pode conter os seguintes valores:

• farthest-corner;
• closest-side;
• closest-corner;
• farthest-side.

Por fim, também podemos definir o formato e o tamanho do gradiente por meio da atribuição dos valores de largura e altura. Veja alguns exemplos de código:

background-image: radial-gradient(20% 40%, orange, LightGoldenRodYellow, blue); /* formato elíptico */
background-image: radial-gradient(50px 80px, orange, LightGoldenRodYellow, blue); /* formato elíptico */
background-image: radial-gradient(ellipse, orange, LightGoldenRodYellow, blue); /* formato elíptico */
background-image: radial-gradient( orange, LightGoldenRodYellow, blue); /* formato circular */
background-image: radial-gradient(40% 40%, orange, LightGoldenRodYellow, blue); /* formato circular */
background-image: radial-gradient(40px 40px, orange, LightGoldenRodYellow, blue); /* formato circular */
background-image: radial-gradient( at top left, orange, LightGoldenRodYellow, blue); /* formato circular posicionado no canto superior esquerdo do elemento */
background-image: radial-gradient( at top left, orange, LightGoldenRodYellow, blue); /* formato elíptico posicionado no canto superior esquerdo do elemento */

Repete o gradiente radial: repeating-radial-gradient()

A função repeating-radial-gradient() permite que o efeito definido para o gradiente seja aplicado várias vezes no espaço disponível. Dessa forma, é possível construir efeitos interessantes com esse recurso.

Vale ressaltar que é preciso definir os limites das cores, especialmente o da última cor para indicar como será a repetição. Caso isso não seja feito, o resultado poderá ser o mesmo que o da função radial-gradient() ou, ainda, não será o de uma repetição contínua como o esperado. Veja alguns exemplos:

background-image: radial-gradient(orange,LightGoldenRodYellow, blue); /* aplicação da função radial-gradient() */
background-image: repeating-radial-gradient(orange,LightGoldenRodYellow, blue ); /*mesmo resultado que a função radial-gradient() */
background-image: repeating-radial-gradient(orange,LightGoldenRodYellow, blue 10%); /*definição do ponto de repetição na última cor*/
background-image: repeating-radial-gradient(orange 20%,LightGoldenRodYellow 30%, blue 40%); /* modificação do efeito */

Qual é a compatibilidade com os navegadores?

O gradiente CSS pode não funcionar da maneira adequada em todos os navegadores, especialmente os mais antigos e, assim, causar alguma falha na aplicação web durante a utilização pela pessoa usuária. Para evitar esse problema, confira a partir de qual versão os principais navegadores oferecem suporte ao recurso CSS gradients:

• Internet Explorer: 10;
• Edge: 12;
• Firefox: suporte parcial a partir da versão 3.6 e completo após a 36;
• Chrome: parcial, a partir da 4 e total da versão 10 em diante;
• Safari: suporte parcial a partir da versão 4;
• Opera: parcial, na 11.5 e total a partir da 12.1;
• iOS Safari: parcial, a partir da versão 3.2;
• Android Browser: 4;
• Opera Mobile: 12;
• Chrome for Android: 89;
• Firefox for Android: 86;
• Samsung Internet: 4.

As funções para a criação de efeitos CSS gradient ajudam a criar aplicações front-end muito mais elegantes. Por isso, é importante entender a diferença entre elas e como utilizá-las em diferentes situações, como para adicionar efeitos em um botão ou para servir como imagem de fundo de um elemento HTML.

Gostou do nosso conteúdo sobre a aplicação de efeitos gradiente? Então, confira o que faz e como se tornar uma pessoa programadora!