07/04/2017

6 ferramentas grátis de criação de gradientes para facilitar sua vida


Tendência no último ano, o gradiente - ou degradê - voltou com tudo no design. Seja ele como plano de fundo ou um elemento, como também no próprio logotipo da empresa.

Grandes marcas atualizaram suas identidades visuais. Entre elas  Oi e o Instagram, com esse efeito.

Mas, eaí você pergunta: Qual a combinação certa de cores?


Felizmente o design não é uma ciência exata e isso possibilita fazer várias combinações e testes para chegar a um conceito

Mas caso queira algo mais prático e fácil, separamos 6 ferramentas online que irão facilitar sua vida!

Vamos lá?






O WebGradients é uma coleção gratuita de 180 gradientes lineares que você pode usar como background em qualquer parte do seu site. Para copiar o CSS basta clicar no "copy CSS" e pronto! Eles também prepararam uma versão PNG de cada gradiente, assim você pode usar nas suas criações gráficas, e ainda existem pacotes para o Sketch & Photoshop.





No uiGradientes você encontra diversas contribuições de outros usuários para você utilizar. Ele disponibiliza código UI, que pode ser copiado e colado em seu programa de editoração. Você também pode contribuir com a sua combinação.





Colorful Gradients é um tumblr com várias combinações de cores no gradiente, sem muito segredo.





Na AngryTools você pode fazer alguns testes de cores no gradiente, fazer ajustes e a ferramenta te envia o código CSS para você aplicar no seu site. Tem nos formatos RGB, HEX, Android, Canvas, SVG e PHP.


5. Blend


Blend é uma ferramenta intuitiva que permite criar gradientes CSS3, usando cores de design planas e materiais. Ele gera um código para você usar em seu site.





CSSmatic é um aplicativo online que permite a criação de gradientes, sombras, texturas e bordas arredondadas. Em cada um dos recursos você encontrará um editor completo para trabalhar o efeito que deseja. E claro, ele também gera para você o código CSS.



Gostaram? Já utilizaram alguma dessas ferramentas? Fique à vontade para responder nos comentários :)



← Postagem mais recente Postagem mais antiga → Página inicial

0 comentários: