Gere um gradiente CSS linear ou radial

Crie um gradiente CSS reutilizável sem montar a pontuação manualmente nem questionar a posição de cada parada. Escolha um gradiente linear ou radial, informe a direção ou a forma e adicione pelo menos duas paradas de cor ordenadas. Cada parada pode ter uma cor CSS e uma posição opcional. O resultado é um único valor determinístico, pronto para uma declaração background-image, um token de design, uma folha de estilos ou o código de uma aplicação. Tipos, descritores, posições e listas incompletas inválidos são rejeitados com erros de entrada claros.

Escolha a família e a geometria do gradiente

Comece pelo comportamento visual de que você precisa. Um gradiente linear percorre um eixo, portanto o descritor deve ser um ângulo CSS, como 135deg, ou uma direção com palavras-chave, como to right, to bottom ou to top left. Um gradiente radial se expande a partir de um ponto.

O descritor pode indicar circle ou ellipse, acrescentar opcionalmente um tamanho como closest-side ou farthest-corner e definir uma origem depois de at, por exemplo circle at center ou ellipse farthest-corner at 25% 40%. Manter a geometria separada das cores facilita a revisão e a reutilização da solicitação. O gerador verifica o descritor de acordo com a família escolhida, em vez de apenas juntar fragmentos arbitrários.

Isso identifica erros como fornecer uma forma radial para um gradiente linear antes que o valor chegue à folha de estilos. Também impede que vírgulas e caracteres capazes de quebrar uma declaração fiquem escondidos na geometria. Escolha linear quando a transição precisar de uma direção clara e radial quando o visual tiver de se espalhar a partir de um ponto focal.

Monte uma lista ordenada de paradas de cor

Adicione as paradas exatamente na ordem em que elas devem aparecer no CSS. Toda parada exige uma cor, e o gradiente completo precisa de pelo menos duas, pois não existe transição com uma única cor. Você pode usar formatos CSS conhecidos, como nomes de cores, valores hexadecimais, rgb(), hsl() ou a notação funcional moderna separada por espaços.

A posição da parada é opcional. Quando ela é omitida, o navegador distribui as paradas não especificadas conforme as regras de gradiente do CSS. Quando informada, deve conter um ou dois comprimentos ou percentuais CSS, como 0%, 12px ou 30% 45%.

Duas posições criam uma faixa de cor sólida com a mesma cor nos dois limites. O gerador preserva a ordem fornecida; ele não ordena posições nem reinterpreta a paleta, porque paradas sobrepostas ou descendentes podem criar transições bruscas úteis. Os parênteses são conferidos, e caracteres perigosos para declarações são rejeitados.

Essa validação mantém o resultado previsível e deixa as escolhas artísticas sob o seu controle.

Use o valor gerado em CSS e automações

A resposta contém um campo gradient cujo valor começa com linear-gradient() ou radial-gradient(). Atribua esse valor a background-image ou ao atalho background quando nenhuma outra camada de fundo precisar ser preservada. Você também pode armazená-lo em uma propriedade personalizada como --hero-gradient e reutilizar o token em vários componentes.

Como a capacidade faz apenas validação determinística e montagem de texto, a mesma entrada sempre produz os mesmos espaços e a mesma saída. Essa estabilidade ajuda na geração de código, em testes de snapshot, em construtores de temas e em sistemas de conteúdo que comparam valores byte a byte. Nenhuma chamada de rede, escolha aleatória, inferência de modelo ou leitura do relógio afeta o resultado.

Ao integrar a saída, lembre-se de que a ferramenta gera o valor da imagem de gradiente, e não uma regra CSS completa: sua aplicação define seletor, propriedade, alternativas, dimensões e qualquer cor sólida de reserva.