Paradas de Cor
Saída CSS
Predefinições
Clique em um tema para carregar instantaneamente um gradiente pré-configurado.
Como Funciona e Sintaxe CSS
Esta ferramenta constrói visualmente propriedades `background-image` padrão do CSS usando funções de gradiente. À medida que você adiciona cores e altera posições, o gerador calcula a sintaxe precisa necessária para os navegadores modernos.
Gradientes Lineares
Um gradiente linear transita cores ao longo de uma linha reta. A sintaxe é:
linear-gradient(ângulo, cor1 posição1, cor2 posição2, ...)
O ângulo determina a direção (ex: 90deg vai da esquerda para a direita). A posição determina onde a cor atinge a sua forma mais pura (0% a 100%).
Gradientes Radiais
Um gradiente radial transita cores para fora a partir de um ponto central. A sintaxe é:
radial-gradient(forma em posição, cor1 pos1, cor2 pos2, ...)
A forma pode ser um circle (círculo) ou uma ellipse (elipse). Esta ferramenta define a posição padrão para o center (centro) do elemento.
Gradientes Cônicos
Um gradiente cônico transita cores rodadas em torno de um ponto central, como um gráfico de pizza. A sintaxe é:
conic-gradient(from ângulo at center, cor1 pos1, cor2 pos2, ...)
Os gradientes cônicos são excelentes para criar rodas de cores, gráficos de pizza e padrões angulares complexos.