Gerador de gradientes CSS
Gera gradientes CSS.
Sobre esta ferramenta
A ferramenta monta um gradiente linear de duas paragens, mostra-o em pré-visualização e permite copiar o CSS simples ou uma classe de fundo arbitrária do Tailwind.
Como usar
Defina as duas cores e o ângulo, gere a faixa, confirme o aspeto na pré-visualização e copie a declaração background ou a classe bg-[linear-gradient(…)].
Exemplo
Os valores predefinidos mostram uma passagem diagonal de azul-céu para verde.
Entrada
135deg · #0ea5e9 → #22c55eSaída
background: linear-gradient(135deg, #0ea5e9, #22c55e);Dica
Gradientes de marca com muitas paragens continuam mais fáceis de manter em variáveis CSS.
Bom saber
Posso adicionar mais de duas paragens de cor?
Este gerador cria um gradiente linear de duas paragens. Para gradientes de marca com várias paragens, copie o resultado e acrescente paragens à mão, ou guarde-os em variáveis CSS.
Como uso o resultado Tailwind?
Cole a classe bg-[linear-gradient(…)] num elemento. O Tailwind lê-a como valor arbitrário, por isso não é preciso alterar a configuração.