Gerador de gradientes CSS

Como usar o gerador de gradientes CSS

1. Escolhe um Tipo de gradiente: Linear, Radial ou Cónico. A pré-visualização grande no topo atualiza-se a cada alteração.
2. Num gradiente linear, define o Ângulo com o cursor ou escreve-o em graus (90° vai da esquerda para a direita, 180° de cima para baixo). Num gradiente cónico, o ângulo é o ponto onde a rotação começa.
3. Nos gradientes radiais e cónicos, move o centro com Centro X e Centro Y. Um gradiente radial pode ser um Círculo ou uma Elipse (menu Forma).
4. Edita as Paragens de cor. Clica em qualquer ponto da barra para adicionar aí uma paragem com a cor que o gradiente já tem nesse ponto, ou usa Adicionar paragem para preencher o maior intervalo. Arrasta um marcador para o mover. Cada paragem tem também uma linha onde podes escolher a cor, escrever qualquer cor CSS, definir a Posição (%) ou Remover a paragem (um gradiente mantém sempre pelo menos duas).
5. Se quiseres, marca Repetido, escolhe a Interpolação de cor, clica em Inverter para virar as paragens ao contrário ou em Gradiente aleatório para te inspirares.
6. Copia o resultado em Código CSS com Copiar.

Teclado: seleciona um marcador na barra e usa as setas para o mover 1 % (10 % com Shift), Home e End para saltar para as extremidades e Delete para o remover.

As três funções de gradiente

• linear-gradient() mistura as cores ao longo de uma linha reta. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) vai do índigo à esquerda até ao rosa à direita. Os ângulos contam no sentido dos ponteiros do relógio a partir do topo: 0deg aponta para cima, 90deg para a direita.
• radial-gradient() irradia a partir de um ponto central. radial-gradient(circle at 30% 40%, …) coloca o centro a 30 % da esquerda e a 40 % do topo. Uma elipse estica com a caixa; um círculo mantém-se redondo.
• conic-gradient() roda à volta de um centro como os ponteiros de um relógio. conic-gradient(from 0deg at 50% 50%, …) cria círculos cromáticos, gráficos circulares e efeitos de spinner. As posições das paragens são frações da volta completa.

A opção Repetido usa repeating-linear-gradient() e as funções irmãs: o padrão definido pelas paragens repete-se até preencher a caixa. Coloca a última paragem bem abaixo de 100 % (por exemplo 20 %) para veres riscas ou anéis.

Duas paragens na mesma posição criam uma transição seca em vez de uma mistura, que é como se fazem riscas e bandeiras. O gerador mantém as paragens ordenadas por posição no código, como o CSS exige.

Interpolação sRGB ou OKLCH

Por omissão, os navegadores misturam as cores dos gradientes em sRGB. Entre duas cores saturadas, como azul e amarelo, isto cria muitas vezes um cinzento baço ou um meio enlameado. O CSS Color Level 4 permite escolher o espaço de interpolação: linear-gradient(90deg in oklch, …) mistura no espaço percetual OKLCH e mantém o meio vivo.

Com OKLCH (mais suave, com alternativa sRGB), a ferramenta escreve duas declarações background: primeiro a versão sRGB clássica, depois a versão OKLCH. Os navegadores que suportam espaços de interpolação (Chrome e Edge 111+, Safari 16.2+, Firefox 127+) usam a segunda linha; os mais antigos ignoram-na e ficam com a primeira.

Dicas

• Os campos das paragens aceitam cores com transparência, por exemplo #00000080 ou rgb(0 0 0 / 50%), o que dá jeito para sobreposições em imagens.
• O código é escrito com background. Usa antes background-image se definires as outras propriedades de fundo em separado.
• Gradientes subtis (dois tons próximos da mesma cor) costumam parecer mais profissionais do que misturas arco-íris.