Escolha linear, radial ou cônico, defina o ângulo e edite cada parada: a prévia pinta a mesma declaração que o painel de saída imprime. As posições ficam entre 0 e 100 por cento, o ângulo entre 0 e 360 graus e a bancada aceita de duas a oito paradas.
Funciona localmente no seu navegadorA bancada abre como linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%). A prévia pinta essa declaração e o painel de saída a imprime, então o código copiado é o gradiente que você estava vendo.
Cada controle tem um limite medido: o ângulo fica entre 0 e 360 graus, as posições entre 0 e 100 por cento e a lista entre duas e oito paradas. Um valor fora da faixa é reescrito no limite ao sair do campo, em vez de a prévia usá-lo em silêncio.
Três paradas, 135 graus, linear: são os valores com que a página abre e os que Redefinir restaura. A saída é uma única declaração, .gradient-background { background: … ; }, ordenada pela posição, então uma parada inserida entre 0 e 55 é impressa antes do 55 mesmo tendo sido adicionada por último.
O ângulo só existe para linear-gradient() e conic-gradient(). O cônico imprime from 90deg at center; o radial imprime circle at center e nenhum ângulo. As posições saem com uma casa decimal, a mesma precisão que o campo mostra depois de confirmar.
Um gradiente precisa de pelo menos duas paradas: com duas, o botão × avisa que são necessárias ao menos duas cores em vez de remover uma. Oito é o teto — com oito paradas o botão Adicionar cor fica desativado, então o limite aparece em vez de ser um clique que não faz nada.
Adicionar usa a maior lacuna entre as paradas existentes, o que mantém a rampa regular: quatro paradas a partir do padrão ficam em 0, 28, 55 e 100 por cento, e as oito completas em 0, 14, 28, 42, 55, 67, 78 e 100. Inverter cores espelha cada posição (100 menos a posição) e vira a lista; a declaração exportada fica sempre ordenada por posição.
As cores são HEX de seis dígitos ou o seletor de cor. A forma curta de três dígitos, como #fff, não é expandida: a página mantém o último gradiente válido e pede seis dígitos, e hsl() ou rgba() digitados num campo HEX são recusados do mesmo jeito.
Não há exportação em imagem, SVG ou PNG, nem controle de opacidade ou ponto de interpolação, nem segunda camada de gradiente, nem prévia da rampa dentro do seu próprio contêiner. A declaração copiada do painel de saída é o produto inteiro.