Crie gradientes lineares, radiais e cônicos impressionantes com um editor visual. Adicione múltiplas paradas de cor e gere código CSS instantaneamente.
Selecione linear, radial ou cônico nos botões de tipo de gradiente. A visualização ao vivo é atualizada imediatamente.
Use os seletores de cor e controles deslizantes de posição para definir suas cores. Clique em 'Adicionar ponto' para mais cores ou no ícone de lixeira para remover. Reordene as paradas com as setas cima/baixo.
Para gradientes lineares e cônicos, arraste o controle de ângulo (0°–360°) para controlar a direção do gradiente. Gradientes radiais não usam ângulo.
Clique em 'Copiar CSS' para copiar a propriedade background para sua área de transferência, ou exporte o gradiente como arquivo SVG. Você também pode usar os botões de compartilhar para enviar um link que reproduz seu gradiente.
Clique em 'Aleatório' para gerar um gradiente aleatório de duas cores com um ângulo aleatório, ou em 'Limpar' para redefinir tudo para as configurações padrão.
Cada parada de cor define uma cor e uma posição de 0% a 100%. O navegador calcula transições suaves entre paradas adjacentes de acordo com a especificação CSS de gradientes. Você pode adicionar quantas paradas precisar para criar efeitos multicoloridos complexos.
A ferramenta gera um CSS linear-gradient() com o ângulo escolhido. As cores se misturam em linha reta do ponto inicial ao ponto final. Alterar o ângulo rotaciona a direção do gradiente.
Gradientes radiais usam radial-gradient(circle) para produzir transições de cor circulares do centro para fora. Gradientes cônicos usam conic-gradient() para varrer cores ao redor de um ponto central, começando pelo ângulo definido — útil para gráficos de pizza, rodas de cores e efeitos decorativos.
Ao exportar como SVG, a ferramenta converte suas paradas de cor em elementos de gradiente SVG (linearGradient ou radialGradient) e os empacota em um arquivo SVG independente que pode ser usado em ferramentas de design ou incorporado em páginas web.
Seu tipo de gradiente, ângulo e paradas de cor são codificados na URL da página. Compartilhar esta URL permite que qualquer pessoa abra exatamente o mesmo gradiente em seu navegador sem precisar recriá-lo manualmente.
Você pode criar três tipos: gradientes lineares que misturam cores ao longo de uma linha reta, gradientes radiais que irradiam para fora de um ponto central em forma circular, e gradientes cônicos que varrem cores ao redor de um ponto central como uma roda de cores.
Predefinições salvas é um recurso para Apoiadores.
Histórico de ferramentas é um recurso para Apoiadores.
Notas de ferramentas é um recurso para Apoiadores.
