Como criar um gradiente
- Escolha o tipo: linear, radial ou cônico.
- Clique na barra de cores para adicionar uma cor e arraste para mudar a posição.
- Ajuste o ângulo e copie o CSS ou a classe Tailwind.
Dicas para gradientes bonitos
- Use cores vizinhas no círculo cromático (azul e roxo, laranja e rosa) para transições suaves.
- Gradientes entre cores opostas tendem a ficar acinzentados no meio. Adicione uma cor intermediária para evitar isso.
- Em fundos com texto, prefira gradientes sutis e confira o contraste do texto.
Perguntas frequentes
Qual a diferença entre gradiente linear, radial e cônico?
O linear muda de cor em linha reta, na direção do ângulo. O radial parte do centro para fora, em círculo. O cônico gira ao redor do centro, como um gráfico de pizza ou uma roda de cores.
Funciona em todos os navegadores?
Sim. linear-gradient, radial-gradient e conic-gradient são suportados por todos os navegadores modernos, sem prefixos.
Como uso no Tailwind?
Copie a classe gerada (bg-[linear-gradient(...)]) e cole no className do elemento. Ela usa os valores arbitrários do Tailwind, então funciona sem configurar nada.