Gerador de gradientes CSS
Crie um gradiente CSS com até quatro paradas de cor, nas formas linear, radial ou cônica, e copie o código como CSS ou classes do Tailwind v4.
Como criar um gradiente CSS
- Escolha linear, radial ou cônico com os botões de Tipo.
- Clique em uma parada de cor para mudar a cor dela. Use Adicionar parada e Remover parada para trabalhar com duas a quatro paradas.
- Em um gradiente linear, defina a rotação de 0 a 315 graus, em passos de 45. Clique em Aleatório para ter uma nova ideia.
- Alterne a exportação entre CSS e Tailwind v4 e clique no botão de copiar para levar o código com você.
O que você pode fazer
Três tipos de gradiente
Gradientes lineares ao longo de um ângulo, gradientes radiais a partir de um ponto central e gradientes cônicos que giram em torno de um ponto.
CSS interpolado em OKLCH
O CSS traz uma versão sRGB que todo navegador entende, seguida do mesmo gradiente interpolado em OKLCH, que mantém o meio tão vivo quanto as pontas nos navegadores compatíveis.
Exportação para Tailwind v4
Copie o gradiente como classes utilitárias do Tailwind v4 em vez de CSS.
Prévia ao vivo
A prévia é atualizada enquanto você muda as cores, o ângulo e o tipo.
Comece pela biblioteca
Abra qualquer gradiente da biblioteca de gradientes no gerador, com as paradas e o ângulo já carregados.
Perguntas frequentes
Como criar um gradiente CSS?
Escolha um tipo, defina de duas a quatro cores e, para um gradiente linear, um ângulo. O gerador escreve a declaração background, e você a copia para a sua folha de estilos.
Qual é a diferença entre gradientes lineares, radiais e cônicos?
Um gradiente linear mistura as cores ao longo de uma linha reta, em um ângulo. Um gradiente radial mistura do centro para fora. Um gradiente cônico gira as cores em torno de um ponto central, como um círculo cromático ou um gráfico de pizza.
Por que meu gradiente fica cinza ou sujo no meio?
Misturar duas cores saturadas em sRGB pode passar por um ponto médio mais apagado. Interpolar em OKLCH, o que o CSS deste gerador inclui para os navegadores compatíveis, tende a manter o meio mais vivo.
Posso usar esses gradientes no Tailwind CSS?
Sim. Mude a exportação para Tailwind v4 e copie as classes.
Quantas paradas de cor posso adicionar?
De duas a quatro. Para uma rampa mais longa de cores separadas, use o gerador de paletas em gradiente.