Gerador de Gradiente CSS

Crie gradientes CSS lineares, radiais e cônicos visualmente. Adicione múltiplos pontos de cor e copie o CSS. Pré-visualize o resultado em tempo real.

Estúdio · ambiente neutro

Pontos de cor — arraste as alças, clique na trilha para adicionar

Tipo

Ângulo 90°

Pontos de cor

CSS

Funcionalidades

Linear, radial e cónico

Vários pontos de cor

Controlo do ângulo e da direção

Pré-visualização em direto e código CSS

Como Usar

1. Escolha o tipo de gradiente e o ângulo; a superfície mostra a prévia em tamanho real.

2. Arraste as alças para mover os pontos, clique em um espaço vazio da trilha para adicionar (até seis) ou faça o ajuste fino com os seletores de cor e campos de porcentagem.

3. Copie o CSS gerado — confira sobre o xadrez para detectar faixas em transparências.

Sobre esta ferramenta

Gradientes CSS pintam transições suaves de cor sem arquivos de imagem, então ficam nítidos em qualquer tamanho e não custam nada para baixar. Este gerador cria os três tipos nativos: linear-gradient ao longo de um ângulo, radial-gradient espalhando-se a partir do centro e conic-gradient girando em torno de um ponto como um círculo cromático. Arraste as alças na trilha para mover as paradas de cor, clique na trilha para adicionar uma parada (até seis) e ajuste cores e posições nos campos. O palco mostra o resultado em tamanho real, e uma superfície quadriculada revela faixas ou transparências inesperadas. O resultado é CSS padrão, que funciona em todos os navegadores atuais, pronto para colar numa declaração background ou background-image.

Perguntas Frequentes

Qual a diferença entre gradientes lineares, radiais e cônicos?

Um gradiente linear muda de cor ao longo de uma linha reta num ângulo escolhido. Um radial se espalha a partir de um ponto central em círculo ou elipse. Um cônico gira as cores em torno de um ponto central, o que é útil para gráficos de pizza e círculos cromáticos.

Como funcionam os ângulos do gradiente?

0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda. Assim, linear-gradient(90deg, red, blue) começa vermelho à esquerda e termina azul à direita.

Por que meu gradiente mostra faixas visíveis?

As faixas aparecem quando duas cores parecidas se estendem por uma área grande, principalmente em telas de 8 bits. Ajuda acrescentar uma parada intermediária, escolher cores com mais contraste ou adicionar uma leve textura de ruído.

Um gradiente pode ter transparência?

Sim. Use cores com alfa, como rgba ou HEX de 8 dígitos. Note que esmaecer até a palavra-chave transparent pode gerar um meio acinzentado em alguns casos; esmaecer até a mesma cor com alfa zero fica mais limpo.

Posso usar um gradiente como cor de texto ou borda?

Sim, com CSS extra. Para texto, defina o gradiente como fundo e use background-clip: text com cor de texto transparente. Para bordas, border-image ou um fundo num elemento envoltório são as abordagens mais comuns.