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

O ângulo do gradiente é a direção em que as cores de um gradiente mudam, e trabalha mais do que a maioria das pessoas imagina. Decide de onde parece vir a luz, onde o olhar começa e acaba, e se o design parece calmo, animador ou inquieto. Como regra geral, mais claro em cima parece natural, as diagonais parecem enérgicas, e a ponta clara deve ficar longe das tuas palavras. Em CSS, os ângulos começam em 0deg a apontar para cima e rodam no sentido dos ponteiros do relógio.

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

Luz vinda de cima

As pessoas tendem a assumir que a luz vem de cima, porque quase sempre vem, do sol ou de um teto. Um gradiente mais claro em cima corresponde a essa expectativa, por isso lê-se como natural e calmo: céu sobre terra, uma parede iluminada, um objeto com luz suave. Inverte-o para que a luz fique em baixo e as mesmas cores parecem teatrais, como uma fogueira, um palco ou um ecrã a brilhar no escuro. Nenhum está errado, mas o segundo deve ser uma escolha.

A mesma expectativa afeta botões e cartões. Uma superfície ligeiramente mais clara em cima lê-se como elevada; uma mais clara em baixo lê-se como pressionada. Vale a pena sabê-lo quando acrescentas um gradiente subtil a um botão com gradiente.

Diagonais e energia

As linhas diagonais parecem movimento, porque parecem instáveis comparadas com as verticais e as horizontais. É por isso que as diagonais, sobretudo do canto superior esquerdo para o inferior direito, são a escolha mais comum para publicações nas redes, botões e gráficos de lançamento. O início no canto superior esquerdo coincide também com o sítio onde os leitores de línguas escritas da esquerda para a direita começam uma página, por isso a ponta clara recebe-os primeiro.

Diagonais mais inclinadas ou mais deitadas mudam o ambiente. Cerca de 100 a 120 graus parece quase vertical, com uma inclinação suave, calmo mas não estático. Cerca de 150 a 160 graus parece luz de fim de tarde rasante sobre uma superfície. Um 45 ou 135 exato é o mais dinâmico, e também o mais comum, o que é uma razão para experimentar algo ligeiramente diferente se quiseres destacar-te; vê gradientes de duas cores.

Mantém a luz longe das palavras

A direção também é composição. A ponta clara de um gradiente atrai o olhar, por isso coloca-a onde queres atenção e mantém o texto na ponta mais calma, onde o contraste é mais estável. Um título no topo de uma publicação combina com um gradiente que escurece para cima, com o brilho no canto inferior, ou o inverso com texto escuro.

Como funcionam os ângulos dos gradientes em CSS

Em CSS, o ângulo de um gradiente linear descreve a direção em que as cores viajam. 0deg aponta a direito para cima, e os ângulos rodam no sentido dos ponteiros do relógio: 90deg vai da esquerda para a direita, 180deg de cima para baixo e 270deg da direita para a esquerda. Se omitires o ângulo, o valor por omissão é 180deg. Também podes 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 corre sempre a 45 graus, seja qual for a forma. Uma palavra-chave de canto como to top right inclina o ângulo para caber na caixa, de modo que a cor do ponto médio passa exatamente entre os outros dois cantos. Num banner largo de 3:1, to top right dá cerca de 18deg, muito mais perto da vertical do que 45deg, porque as faixas de cor têm de ficar ao longo da diagonal comprida. Usa palavras-chave quando queres que o gradiente vá de canto a canto em qualquer forma; usa graus quando queres a mesma inclinação em todo o lado.

Escolher uma direção, passo a passo

1. 1

   Decide de onde vem a luz

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

2. 2

   Coloca primeiro as palavras

   Põe o título onde ele pertence na composição e depois orienta o gradiente para que a ponta calma fique por trás dele.

3. 3

   Escolhe a inclinação para o ambiente

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

4. 4

   Verifica todos os formatos

   Uma direção que resulta num quadrado pode pôr a luz no sítio errado numa story ou num banner. Ajusta por tamanho em vez de cortar.

Para o resto da sintaxe dos gradientes lineares, vê gradientes lineares em CSS. Para outras formas que nem sequer têm uma única direção, vê tipos de gradientes. Os Marks da Gradiently são renderizados para cada tamanho em que desenhas, por isso a luz cai num sítio sensato em todos os formatos, e não onde um corte a deixar.