Ângulo e direção do gradiente: para que lado ele deve ir

O ângulo do gradiente é a direção em que as cores dele mudam e faz mais trabalho do que a maioria imagina. Decide de onde a luz parece vir, onde o olho começa e termina e se o design parece calmo, animador ou inquieto. Como regra prática, mais claro no topo parece natural, diagonais parecem enérgicas e a ponta clara deve ficar longe das suas palavras. Em CSS, os ângulos começam em 0deg, apontando para cima, e giram no sentido horário.

Como a direção do gradiente muda a sensação

Luz vinda de cima

As pessoas tendem a supor que a luz vem de cima, porque quase sempre vem, do sol ou de um teto. Um gradiente mais claro no topo combina com essa expectativa e por isso parece natural e calmo: o céu sobre a terra, uma parede iluminada, um objeto com luz suave. Inverta para que a luz fique embaixo e as mesmas cores parecem teatrais, como uma fogueira, um palco ou uma tela brilhando no escuro. Nenhuma das duas está errada, mas a segunda deve ser uma escolha.

A mesma expectativa afeta botões e cartões. Uma superfície um pouco mais clara no topo parece em relevo; uma mais clara embaixo parece afundada. Vale saber disso ao acrescentar um gradiente sutil a um botão com gradiente.

Diagonais e energia

Linhas diagonais parecem movimento, porque parecem instáveis diante de verticais e horizontais. É por isso que as diagonais, sobretudo do canto superior esquerdo ao inferior direito, são a escolha mais comum para posts sociais, botões e gráficos de lançamento. O início no canto superior esquerdo também combina com onde os leitores de idiomas escritos da esquerda para a direita começam uma página, então a ponta clara os recebe primeiro.

Diagonais mais ou menos inclinadas mudam o clima. Perto de 100 a 120 graus parece quase vertical com uma leve inclinação, calmo mas não estático. Perto de 150 a 160 graus parece a luz do fim da tarde raspando numa superfície. Um 45 ou 135 exatos são os mais dinâmicos e também os mais comuns, o que é um motivo para tentar algo um pouco diferente se você quer se destacar; veja os gradientes de duas cores.

Mantenha a luz longe das palavras

A direção também é layout. A ponta brilhante de um gradiente puxa o olho, então posicione-a onde você quer atenção e mantenha o texto na ponta mais calma, onde o contraste é mais estável. Um título no topo de um post combina com um gradiente que escurece rumo ao topo, com o brilho no canto de baixo, ou o inverso com texto escuro.

Como os ângulos de gradiente funcionam em CSS

Em CSS, o ângulo de um gradiente linear descreve a direção em que as cores viajam. 0deg aponta direto para cima e os ângulos giram no sentido horário: 90deg vai da esquerda para a direita, 180deg de cima para baixo e 270deg da direita para a esquerda. Se você omitir o ângulo, o padrão é 180deg. Também dá para usar palavras-chave como to right e to bottom left.

/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }

A diferença no último par importa em banners e stories. Um ângulo fixo como 45deg sempre corre a 45 graus, seja qual for o formato. Uma palavra-chave de canto como to top right inclina o ângulo para caber na caixa, então a cor do ponto médio corre exatamente entre os outros dois cantos. Num banner largo de 3:1, to top right dá cerca de 18deg, bem mais perto da vertical que 45deg, porque as faixas de cor precisam ficar ao longo da diagonal maior. Use palavras-chave quando quiser que o gradiente vá de canto a canto em qualquer formato; use graus quando quiser a mesma inclinação em todo lugar.

Escolhendo uma direção, passo a passo

1. 1

   Decida de onde vem a luz

   De cima para calma e naturalidade, de baixo para brilho e drama, de um canto para um holofote.

2. 2

   Posicione primeiro as palavras

   Ponha o título onde ele pertence no layout e depois faça o gradiente correr de modo que a ponta calma fique atrás dele.

3. 3

   Escolha a inclinação para o clima

   Vertical para calma, diagonal para energia, horizontal para progresso.

4. 4

   Confira cada formato

   Uma direção que funciona num quadrado pode pôr a luz no lugar errado num story ou num banner. Ajuste por tamanho em vez de recortar.

Para o resto da sintaxe do gradiente linear, veja os gradientes lineares em CSS. Para outras formas que não têm uma única direção, veja os tipos de gradiente. Os Marks do Gradiently são renderizados para cada tamanho em que você cria, então a luz deles cai num lugar sensato em todo formato, e não onde um recorte a deixar.