Cores e design
Gerador de gradiente CSS
Componha o gradiente a olho, copie o CSS num clique.
Um bom gradiente dá profundidade a um fundo, a um botão ou a uma secção de destaque — mas encontrar as cores e o ângulo certos exige tentativas. Este editor deixa-o compor visualmente: acrescente de duas a cinco paragens de cor, posicione cada uma com precisão, ajuste o ângulo do gradiente linear ou mude para o modo radial. A pré-visualização ocupa todo o quadro e atualiza-se a cada ajuste, exatamente como o seu navegador o irá apresentar. Quando o resultado agradar, um clique copia a declaração CSS completa (background: linear-gradient(…)), pronta a colar numa folha de estilos, num componente ou num e-mail HTML. Sem conta — tudo acontece no seu navegador.
Como funciona?
- Escolha o tipo de gradiente: linear ou radial.
- Acrescente as cores (2 a 5 paragens) e posicione-as.
- Ajuste o ângulo e afine a olho com a pré-visualização em ecrã inteiro.
- Copie o código CSS gerado para a sua folha de estilos.
Perguntas frequentes
Gradiente linear ou radial: qual a diferença?
O linear progride ao longo de uma reta com o ângulo que escolher — ideal para fundos e botões. O radial irradia do centro para fora — perfeito para efeitos de halo ou de projetor.
Como obter um gradiente subtil e elegante?
Fique entre cores vizinhas na roda das cores e limite a diferença de luminosidade: um gradiente de dois tons próximos é quase sempre mais elegante do que um arco-íris. Um ângulo de 135° dá uma diagonal natural.
O código gerado funciona em todo o lado?
Sim — linear-gradient() e radial-gradient() são suportados por todos os navegadores atuais, sem prefixos. Apenas alguns clientes de e-mail antigos os ignoram — nesse caso, defina uma cor de fundo de reserva.