Gerador de Gradientes
Crie gradientes CSS e Tailwind bonitos com um editor visual intuitivo
Tipo
Ângulo
135°Presets
Cores
.element {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}linear-gradient(135deg, #6366f1 0%, #ec4899 100%)Perguntas Frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos?
Gradientes lineares fazem a transição de cores ao longo de uma linha reta. Gradientes radiais irradiam de um ponto central para fora. Gradientes cônicos rotacionam as cores em torno de um ponto central, como uma roda de cores.
Como uso o gradiente no Tailwind CSS?
Mude para a aba Tailwind e copie os nomes das classes geradas. Cole-os diretamente em qualquer projeto Tailwind — nenhuma configuração adicional é necessária para cores padrão.
Posso adicionar mais de duas paradas de cor?
Sim — clique em 'Adicionar Cor' para adicionar quantas paradas quiser, depois arraste ou digite posições exatas para controlar precisamente onde cada cor aparece no gradiente.
Posso usar o gradiente no React ou outros frameworks?
Absolutamente. O código CSS funciona em qualquer lugar onde você possa aplicar estilos, incluindo estilos inline do React, Vue, Svelte, HTML puro ou qualquer folha de estilos CSS.