Ícone do site Dicas de UX

7 ferramentas gratuitas para gerar gradientes

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.

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.

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.

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!

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!

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.

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.

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.

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.