Uma coisa que voltou à moda de uns tempos pra cá é o uso de gradientes em composições digitais. Antigamente ficávamos tentando criar um do zero e para quem já mexeu no Photoshop provavelmente já baixou algum pack deles também.

Hoje existem diversas ferramentas online e de graça para fazer gradientes (degradês?) de uma forma simples e direta, confira a lista abaixo e não esqueça de conferir a dica bônus no final:

UI Gradients

Simples e eficaz, o UI Gradients possui vários gradientes prontos, todos devidamente nomeados como o Blush e o maravilhoso Back to the Future. Um recurso legal é que dá para escolher uma cor base como filtro.

print da home do UI gradients com o tema back to the future escolhido, gradient em tons de laranja e amarelo

Outro ponto bacana neste aqui é poder copiar o CSS.

Gradient Hunt

No Gradient Hunt já tem um fator social interessante aqui que é usado para ranking dos gradientes mais populares. Também permite copiar o CSS e o mais bacana aqui é poder submeter seu gradiente usando o próprio site.

print da home do gradient hunt, logo é uma arara azul, na tela 6 cards com 6 gradientes com tons bem leves desde azul, verde, vermelho e amarelo

Possível filtrar por gradientes normais e por radiais também.

WebGradients

No WebGradients tem algo que não via há um tempo: download de gradiente para Photoshop e Sketch! Além do fato de quando você clica em um dos gradientes rola uma animação que deixa as cores em tela cheia no navegador.

print da home do webgradients, visivel inteiramente 3 cards com círculos com gradientes, opcoes para copiar CSS

Grabient

Além de ter uma lista interessante de gradientes, no Grabient você consegue mudar a posição das cores, adicionar mais cores e ainda mudar o ângulo!

print da home do grabient, visivel dois retangulos com bordas arredondadas, no primeiro gradiente indo do azul ao amarelo, no segundo azul ao verde com a opcao de mudança de angulo selecionando o angulo 73

Gradients Party

Específico para botões, no Gradients.Party a galeria com gradientes é muito bem aplicada em botões já com sombra e borda arredondada. Coisa fina mesmo, dá vontade de clicar!

print da home do gradients party, filtro por cor base e 3 formas de botões azul verde e roxo, mostrando o hexadecimal de cada um

CoolHue

Além de ser um repositório no Github com mais de três mil estrelas, o CoolHue possui plugin para Figma e Sketch. Interface limpa, direto ao ponto, sem muitas opções. É escolher um e pegar o código CSS ou os hexadecimais.

print da home do coolhue, no topo quantidade de estrelas no github, atalhos para figma e sketch, no conteudo cartoes similares a paleta pantone, amarelo, azul, vermelho, roxo, verde

Coolors – Gradients

Dentro do Coolors.co, excelente plataforma com ferramentas relacionadas a cores e paletas, tem a seção específica de gradientes.

Achei bacana que é bem rápido copiar cada hexadecimal: só passar o mouse que ele mostra as duas cores que geram o gradiente.

print da home do coolors gradients,

Bônus: CSS Gradient

Muitas opções de ferramentas, né? Pois fizeram um agregador delas! O CSS Gradient.io. A maioria das ferramentas listadas aqui junto com outras, listadas em um único site.

print da home do css gradient,
One tool for rule them all

Faltou alguma? Qual que você usa? Compartilhe esse post com colegas designers!

Em breve faremos uma lista de plugins para o Figma que geram gradientes.

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma