Montar gradiente CSS linear, radial ou cônico

O que é um gradiente CSS

Um gradiente é uma transição suave entre duas ou mais cores, gerada diretamente pelo navegador — sem precisar de imagem nenhuma. O CSS define três formas de gradiente: linear (transição ao longo de uma linha reta), radial (transição a partir de um ponto central, se espalhando para fora) e cônico (transição em volta de um ponto central, como o ponteiro de um relógio). Esta ferramenta monta o código para qualquer um dos três a partir de escolhas visuais, sem precisar decorar a sintaxe de cada função.

Como funcionam as paradas de cor

Cada cor do gradiente é uma "parada", definida por um valor de cor e uma posição de 0% a 100% ao longo do gradiente. Entre duas paradas vizinhas, o navegador calcula a transição suave automaticamente — não é preciso especificar nada além do início e do fim de cada trecho. Duas paradas nas posições 0% e 100% distribuem a transição por todo o espaço disponível; aproximar as posições concentra a mudança de cor num trecho menor, criando uma faixa mais abrupta em vez de uma transição suave e longa.

Linear: direção em graus

Um gradiente linear segue uma direção só, definida em graus: 0 grau aponta para cima, 90 graus para a direita, 180 para baixo, e assim por diante, girando no sentido horário. É o tipo de gradiente mais comum em fundo de seção, botão ou cartão — uma transição direta de um canto ou lado para o outro.

Radial e cônico: um ponto central

Radial e cônico têm em comum a ideia de um ponto de origem — mas se comportam de forma bem diferente a partir dele. Radial se espalha para fora em todas as direções a partir do centro, em formato de círculo ou de elipse, e a distância até cada parada de cor define até onde aquele trecho da transição se estende. Cônico gira em volta do ponto central em vez de se espalhar — o ângulo inicial funciona como ponto de partida da rotação, e as paradas de cor se distribuem ao longo da volta completa, como fatias de um relógio ou de uma torta.

Escolhendo a posição do centro

Radial e cônico aceitam mudar onde fica o ponto central do gradiente — no meio do elemento (o padrão), num dos quatro lados, ou num dos quatro cantos. Mudar essa posição desloca visivelmente todo o efeito: um gradiente cônico centralizado no canto superior esquerdo, por exemplo, mostra só um quarto de volta visível dentro de um elemento retangular comum, criando um efeito de luz vindo daquele canto.

Compatibilidade entre navegadores

Gradiente linear e radial têm suporte muito amplo — praticamente qualquer navegador atual reconhece os dois sem problema. Gradiente cônico é mais recente na especificação CSS e pode não funcionar em navegadores mais antigos ou desatualizados; para um projeto que precisa garantir suporte amplo, vale conferir a compatibilidade específica do conic-gradient antes de depender dele como único efeito visual de um elemento importante.

Além de fundo: outros usos comuns do mesmo código

O valor de gradiente gerado não precisa ficar só na propriedade background de um elemento inteiro. O mesmo valor funciona, por exemplo, como border-image para uma borda degradê, ou combinado com background-clip: text e uma cor de texto transparente para colorir só as letras de um título com o gradiente — uma técnica comum para destacar um texto sem precisar de imagem. O código copiado por esta ferramenta é sempre a função de gradiente em si (linear-gradient(...), por exemplo); onde aplicá-la dentro do CSS do projeto depende do efeito que se está buscando.

Mais de uma parada na mesma posição

É possível colocar duas paradas na mesma posição (por exemplo, as duas em 50%) para criar uma transição abrupta, sem mistura suave, entre duas cores — na prática, uma "faixa dura" em vez de um degradê. É um recurso válido do CSS, não um erro: o navegador simplesmente não tem espaço para misturar as duas cores quando a distância entre as posições é zero.

O que esta ferramenta não faz

Ela não sugere combinações de cor para o gradiente — a escolha das cores de cada parada continua sendo decisão de quem está desenhando. Não gera gradiente com repetição (repeating-linear-gradient e variantes) nem gradiente sobre imagem de fundo combinada — só o gradiente simples, de cor a cor, nos três formatos padrão do CSS. O código gerado é uma declaração pronta para colar, mas ajustá-la a um contexto visual específico continua sendo trabalho de quem está aplicando o estilo.