Gerador de Gradientes

Crie belos gradientes CSS visualmente. Escolha linear ou radial, adicione paradas de cor, ajuste ângulos, visualize e copie CSS.

Posição: 0%
Posição: 100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -o-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Gerador de Gradientes CSS: Crie Gradientes Lindos Instantaneamente

Gradientes CSS permitem exibir transições suaves entre duas ou mais cores sem precisar de arquivos de imagem. Eles reduzem requisições HTTP, escalam perfeitamente em qualquer resolução e podem ser modificados com uma única linha de código. Nosso gerador torna a criação desses efeitos fácil com uma interface visual e pré-visualização em tempo real.

A ferramenta suporta gradientes lineares e radiais. Os lineares transicionam cores ao longo de uma linha reta definida por um ângulo, enquanto os radiais espalham cores para fora a partir de um ponto central. Você pode adicionar até oito paradas de cor e ajustar o ângulo de 0 a 360 graus.

Uma vez satisfeito com a pré-visualização, a ferramenta gera código CSS limpo pronto para colar na sua folha de estilos. Também fornece versões com prefixos de fornecedor para máxima compatibilidade, incluindo -webkit-, -moz- e -o-.

Designers e desenvolvedores usam frequentemente fundos com gradientes para seções hero, botões, overlays em cartões e barras de navegação. Combinando múltiplas paradas de cor, você pode criar misturas complexas que adicionam profundidade a qualquer página web.

FAQ

Compartilhar

Apoie este projeto

Se você acha nossas ferramentas úteis, nos pague um café!

Buy Me a Coffee

Ferramentas mais populares