Gerador de gradiente CSS — linear, radial e cônico, com prévia ao vivo

Use uma função de gradiente como imagem de fundo: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); O primeiro argumento é a direção (um ângulo ou palavras-chave como to right), seguido dos pontos de cor, cada um com uma cor e uma posição opcional. radial-gradient() se espalha a partir de um ponto e conic-gradient() gira em torno de um. Gradientes são imagens, então vão em background ou background-image, não em background-color.

É a direção para onde o gradiente avança, medida no sentido horário a partir do topo: 0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo (o padrão, se você omitir) e 270deg da direita para a esquerda. Isso é diferente da convenção matemática, em que 0 grau aponta para a direita, e é por isso que gradientes de algumas ferramentas de design saem girados.

Um gradiente linear muda de cor ao longo de uma linha reta. Um gradiente radial muda de cor do centro para fora, como um círculo ou uma elipse, e a palavra-chave de tamanho (closest-side, farthest-corner etc.) controla onde o último ponto cai. Um gradiente cônico muda de cor em volta de um ponto central, como os ponteiros de um relógio, o que o torna a ferramenta certa para gráficos de pizza, rodas de cores e spinners.

Coloque dois pontos na mesma posição para ter uma borda nítida em vez de uma transição e repita o padrão. Por exemplo, repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) cria listras diagonais de 10px de largura. A predefinição Listras daqui faz o mesmo com porcentagens. Num gradiente repetido, a distância entre o primeiro e o último ponto é o comprimento de uma repetição.

Para gradientes lineares simples de duas ou três cores, use os utilitários do Tailwind, como bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r no Tailwind v4). Para todo o resto — ângulos, gradientes radiais ou cônicos, pontos com opacidade —, use um valor arbitrário: a classe gerada aqui, como bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], em que os sublinhados substituem os espaços. Valores arbitrários muito longos ficam difíceis de ler, então considere movê-los para a configuração do tema.

Por padrão, os navegadores interpolam gradientes em sRGB, e a linha reta entre duas cores saturadas e quase opostas (azul e amarelo, vermelho e verde) passa por um cinza dessaturado. Adicione um ponto intermediário com uma cor limpa ou, nos navegadores atuais, interpole num espaço perceptual: linear-gradient(90deg in oklch, blue, yellow). O efeito de faixas em gradientes longos e sutis é outro problema, causado pela cor de 8 bits; um pouco de textura de ruído sobre o gradiente o disfarça.