Duas cores, quatro direções, código pronto para copiar
O gerador de gradientes pré-visualiza um gradiente entre quaisquer duas cores e escreve o CSS para você. Escolha diagonal, horizontal, vertical ou radial e copie a declaração linear-gradient ou radial-gradient, ou as classes utilitárias equivalentes do Tailwind. Suas duas cores ficam armazenadas na URL, então um gradiente pode ser compartilhado por link, e um conjunto de pares predefinidos criados com cores do Material Design está a um clique de distância.
Como usar
- Defina as cores De e Para com os seletores ou digitando códigos hex.
- Escolha uma direção abaixo da pré-visualização: diagonal (135°), horizontal, vertical ou radial.
- Copie o CSS ou as classes do Tailwind com os botões de copiar.
- Pressione Compartilhar para copiar um link, ou abra a página própria do gradiente para ver detalhes de cor dos dois pontos.
Saída CSS vs Tailwind
A aba CSS fornece uma declaração simples background: linear-gradient(135deg, #A, #B); que funciona em todos os navegadores modernos sem prefixos. A aba Tailwind fornece as utilidades equivalentes bg-gradient-to-r from-[#A] to-[#B] usando valores arbitrários, então as cores não precisam existir na sua config do Tailwind. Se você usa Tailwind v4, a utilidade de direção se escreve bg-linear-to-r; as classes from/to não mudam.
Exemplos
- Fundo de hero: de um índigo escuro para um índigo um pouco mais claro, na diagonal, mantém o texto branco legível e acrescenta profundidade.
- Hover de botão: um gradiente horizontal entre dois tons da sua cor primária parece mais vivo do que uma simples troca de cor.
- Placeholder de avatar: um gradiente radial de uma cor da marca para seu tom mais escuro parece intencional com as iniciais por cima.
Dicas
- Gradientes entre dois tons do mesmo matiz quase sempre ficam bons. Escolha os dois de uma mesma família na paleta Material.
- Matizes opostos podem gerar um cinza sujo no meio; se isso acontecer, aproxime um dos pontos de um matiz vizinho.
- Verifique o texto sobre gradientes no ponto mais claro com o verificador de contraste, não na média.
- Extraia as duas cores de uma foto com o extrator de cores de imagem para um gradiente que combine com suas imagens.