O que é
Este gerador cria gradientes em CSS de forma visual: você escolhe as cores, o tipo (linear ou radial) e o ângulo, e vê a prévia mudar na hora, com o código pronto para copiar e colar no seu site.
Um gradiente é uma transição suave entre duas ou mais cores. Em CSS, ele é aplicado na propriedade background com as funções linear-gradient (transição em linha reta, com um ângulo) ou radial-gradient (transição a partir de um centro, em círculo). Cada cor tem uma posição em porcentagem, que define onde ela aparece na transição.
Com a ferramenta você adiciona de 2 a 6 cores, ajusta a posição de cada uma com um controle deslizante, gira o ângulo do gradiente linear e ainda sorteia combinações aleatórias. É ideal para fundos de sites, botões, cards e banners, sem precisar decorar a sintaxe do CSS.
Como usar
- Escolha o tipo: linear (com ângulo) ou radial (circular).
- Ajuste as cores no seletor e a posição de cada uma no controle deslizante.
- No modo linear, gire o ângulo para mudar a direção.
- Copie o código CSS e cole na propriedade background do seu elemento.
Exemplos
- Fundo de site com gradiente diagonal de roxo para rosa.
- Botão com gradiente linear da esquerda para a direita.
- Card com gradiente radial suave a partir do centro.
- Banner com três ou mais cores em transição.
Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
No linear (linear-gradient) a transição de cores segue uma linha reta, definida por um ângulo. No radial (radial-gradient) a transição parte de um ponto central e se espalha em círculo. Os dois vão na propriedade background.
Como usar o gradiente no meu site?
Copie o código gerado (algo como background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%)) e cole na regra CSS do elemento que deve receber o fundo. Vale para body, div, botões, cards e mais.
Posso usar mais de duas cores?
Sim. A ferramenta permite de 2 a 6 cores. Cada cor tem uma posição em porcentagem, que você ajusta no controle deslizante para definir onde ela aparece no gradiente.
O que significa o ângulo do gradiente?
No gradiente linear, o ângulo define a direção da transição: 0° vai de baixo para cima, 90° da esquerda para a direita, 180° de cima para baixo, e assim por diante. Ajuste o controle para ver o efeito na prévia.