01
Entenda ângulo e centro
No linear, 0 grau aponta para cima e 90 para a direita. O cônico tem ângulo inicial próprio; o radial usa círculo ou elipse e a posição do centro.
Ferramentas HTML e CSS
gerador de gradiente CSScom prévia em tempo real
Mude as cores, os pontos e a forma; a prévia e o CSS são atualizados juntos.
gerador de gradiente CSS
Pontos de cor
Ponto 1
Ponto 2
Declaração CSS
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Cores e CSS ficam nesta aba do navegador; nada é enviado.
Opções do gradiente
O CSS está pronto para copiar.
Quando um fundo tem várias cores, ler apenas a função CSS não revela bem a transição. O gerador de gradiente CSS mostra onde cada ponto atua e quando duas cores na mesma posição formam uma borda seca.
Em banners, botões e detalhes circulares, o gerador de gradiente CSS mantém as mesmas cores enquanto você compara as versões linear, radial e cônica.
Por que usar este gerador de gradiente CSS
Compare formas com a mesma paleta e ajuste cada ponto na própria faixa.
Uma paleta em três formatos
O gerador de gradiente CSS preserva cores e percentuais ao trocar o tipo. Os controles de ângulo, formato e centro aparecem apenas quando afetam a prévia.
Sem copiar um código antigo
Ao mover um ponto, prévia e declaração mudam juntas. Se o HEX for inválido, a saída anterior fica esmaecida e o botão de copiar é bloqueado.
Três detalhes para acertar o resultado
02
Posicione os pontos com exatidão
Arraste o marcador ou informe a porcentagem. Dois pontos na mesma posição criam uma divisão nítida, sem faixa de transição.
03
Confira se a saída está atual
A geração automática começa ligada. Ao desligá-la, altere vários valores e pressione Ctrl/Cmd+Enter para gerar; até lá, Copiar fica indisponível.
Forma, cores e código em um lugar
Linear, radial e cônico
Crie transição direcional, brilho central ou anel de cores sem refazer os pontos.
De dois a oito pontos de cor
Ajuste o HEX de seis dígitos, a opacidade e a posição de cada ponto ou arraste seu marcador.
Declaração CSS pronta
Copie background-image de acordo com a prévia; cores transparentes saem como rgba().
Limites que afetam o CSS gerado
- De dois a oito pontos
- Os dois últimos não podem ser removidos. Antes de excluir um ponto, veja a prévia e confirme; depois, é possível desfazer uma vez.
- Cores em HEX de seis dígitos
- Informe #RRGGBB e opacidade separadamente. Valores inválidos impedem a cópia; esta ferramenta não converte HSL nem nomes de cor.
- Apenas uma camada
- O gerador de gradiente CSS produz uma declaração background-image padrão. Não importa imagens ou CSS existente, não empilha camadas nem exporta PNG ou Tailwind.
- Contraste do texto é outra verificação
- O fundo pode ficar claro em uma ponta e escuro na outra. Verifique a legibilidade no ponto real onde o texto será colocado.
Dúvidas sobre o gerador de gradiente CSS
Como fazer um gradiente CSS?
Escolha o tipo e ajuste as cores e posições. O gerador de gradiente CSS mostra o resultado e prepara a linha background-image para copiar.
Qual é a diferença entre gradiente linear e radial?
O linear muda ao longo de uma direção; o radial se espalha a partir do centro. O cônico gira em torno do centro.
Como adicionar mais cores ao gradiente?
Use Adicionar ponto. A nova cor entra no meio do maior intervalo; depois você pode alterar sua posição e cor, até o limite de oito.
Para que serve o ângulo do gradiente?
No linear ele define a direção; 0 grau aponta para cima e 90 para a direita. No cônico ele define onde a volta começa.
Como copiar o código CSS do gradiente?
Quando a prévia estiver atualizada, clique em Copiar CSS e cole a linha background-image na regra desejada.
Encontrou um caso diferente?
Crie com o gerador de gradiente CSS
Volte aos pontos, ajuste a forma e copie o CSS quando a prévia estiver correta.