O que é Gradiente para CSS?

Um construtor visual de gradientes que permite projetar gradientes lineares, radiais e cônicos com múltiplas paradas de cor e copiar o código CSS. Ajuste ângulos, posições e cores com prévia ao vivo.

Crie gradientes lineares, radiais ou cônicos arrastando paradas em uma barra e vendo o preview se atualizar em tempo real. Cole um gradiente CSS existente para editar no lugar, escolha um preset (Sunset, Aurora, Rainbow), ajuste o ângulo e copie a sintaxe. A saída é CSS puro: sem prefixos de navegador, sem JavaScript.

Como usar

1. Escolha um tipo de gradiente (linear, radial ou cônico) e defina a direção ou o ângulo.
2. Adicione, remova ou ajuste paradas de cor clicando na barra de gradiente ou usando os seletores de cor.
3. Copie o código CSS gerado para usar diretamente na sua folha de estilos.

Quando usar

• Desenhar o fundo de uma seção hero com controle preciso de paradas e ângulo.
• Atualizar um gradiente já existente no CSS: colar, editar visual, copiar de volta.
• Gerar gradiente cônico para fundos estilo gráfico de pizza ou loaders arco-íris.

Resultado

Experimente um gradiente de pôr do sol: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — ótimo para o fundo de uma seção hero.

Perguntas frequentes

Qual a diferença entre linear, radial e cônico?

Linear corre cores em uma reta. Radial se abre a partir de um ponto central em anéis concêntricos. Cônico gira em torno do centro como um gráfico de pizza. Todos aceitam a mesma sintaxe de paradas.

Como importo um gradiente que já tenho no meu CSS?

Cole a declaração completa no campo Import, por exemplo background: linear-gradient(135deg, #ff6b35, #f72585);, e clique em Import. O editor visual preenche ângulo, paradas e tipo automaticamente.

Por que o gradiente aparece em faixas em algumas telas?

O efeito banding surge quando paradas distantes em matiz encontram uma tela de 8 bits. Adicione uma parada intermediária ou reduza o intervalo de ângulo. Navegadores com HDR mostram bem menos faixas.

Posso usar a saída como background-image?

Sim. A string copiada serve como valor para background, background-image ou qualquer propriedade CSS que aceite imagem: border-image, mask e até fill de SVG em navegadores modernos.

A saída inclui prefixos como -webkit-?

Não. Gradientes lineares, radiais e cônicos rodam sem prefixo em todos os navegadores evergreen desde 2017. Adicionar prefixos hoje só polui a folha de estilos.

Ferramentas relacionadas