Gradiente

Uma transição suave entre cores que adiciona profundidade, ênfase e identidade visual.

Hard

O que é

Gradiente é a mistura suave de duas ou mais cores ao longo de uma forma, fundo ou elemento, e pode ser linear, radial ou angular. Ele sai do preenchimento chapado e cria profundidade e energia com uma transição sutil. Já foi considerado datado por um tempo, mas voltou com força nos sistemas visuais modernos.

Em design, o gradiente mexe com hierarquia e atenção. Um botão com gradiente costuma saltar mais que cor chapada, o que ajuda a guiar pra ação. Um fundo em gradiente cria foco. E ele ainda vira identidade, como acontece com o Instagram, que é reconhecido pelo gradiente da própria marca.

A acessibilidade pede cuidado aqui. Texto sobre gradiente precisa manter contraste em toda a transição, e não só num ponto. Por isso, um gradiente bem usado costuma ficar mais no decorativo, ou então recorre a um overlay pra garantir a leitura.

Em uma frase

O texto sobre esse gradiente perde contraste num trecho, vamos pôr um overlay escuro por baixo.

A pergunta que ele responde

Como uso transição de cor pra dar destaque sem prejudicar a leitura do texto?

Quando usar

Ajuda quando você quer dar destaque, profundidade ou identidade de marca, sempre cuidando do contraste onde houver texto.

Como não usar

O cuidado é não pôr texto sobre gradiente sem checar o contraste em toda a faixa, porque algum trecho pode acabar ilegível.

Na prática

Pense num time aplicando um gradiente sutil no fundo do hero. Eles percebem que, num trecho, o texto perde contraste, e resolvem isso colocando um overlay escuro por baixo do texto.

Não confunda com

Vale separar gradiente de sombra. O gradiente é uma transição de cor dentro de uma superfície, ele acontece no próprio elemento. A sombra simula profundidade projetando uma área escura atrás ou abaixo do elemento. Um é cor que muda na superfície, a outra é a ilusão de que algo está elevado.

D

Em inglês

Gradient

Pronúncia

n/a

Também chamado de

gradiente, degradê

Origem

n/a

Fonte

Saiba mais

Material Design, guidelines sobre uso de cor e gradiente