Gerador de Gradientes CSS Linear, Radial e Cônico

Gerador de Gradientes CSS

Os gradientes CSS permitem criar transições de cor suaves sem necessidade de arquivos de imagem. O navegador os renderiza como fundo usando as funções linear-gradient(), radial-gradient() e conic-gradient(). Esta ferramenta gera o CSS visualmente para que você possa ver o resultado enquanto ajusta cores, ângulos e posições dos pontos.

Como Usar

1. Escolha um tipo de gradiente. Linear para misturas direcionais, radial para fusões circulares, cônico para varreduras angulares
2. Adicione e ajuste pontos de cor. Clique no seletor para escolher uma cor, arraste o controle deslizante para definir sua posição no gradiente
3. Ajuste a direção. Use o quadrante de ângulo ou os botões de seta para gradientes linear. Para radial e cônico, ajuste a posição do centro com os controles deslizantes X/Y
4. Teste um preset para se inspirar. Clique em qualquer miniatura de preset para carregar suas cores e configurações como ponto de partida
5. Copie o CSS. Clique no botão Copiar ou pressione Cmd+C para copiar a propriedade background para sua área de transferência

Como Funcionam os Gradientes CSS

Um gradiente CSS é tecnicamente uma imagem, não uma cor. A propriedade abreviada background o aceita porque background-image faz parte da abreviação. Isso significa que você pode sobrepor múltiplos gradientes separados por vírgulas no mesmo elemento, e usar gradientes em qualquer lugar que aceite imagens: border-image, list-style-image, até mesmo mask-image.

O navegador calcula o gradiente criando uma ‘linha de gradiente’ (linear), um ‘raio de gradiente’ (radial) ou um ‘arco de gradiente’ (cônico). Os pontos de cor definem as cores em posições específicas ao longo desta linha. Entre pontos, o navegador interpola no espaço de cor sRGB por padrão. CSS Color Level 4 introduz interpolação in oklab e in oklch para misturas mais uniformês perceptualmente, mas o suporte do navegador ainda está sendo implementado.

Pontos de Cor e Posições

Cada ponto de cor consiste em um valor de cor é uma posição opcional:

linear-gradient(90deg, red, blue)
/* Dois pontos sem posições: cores distribuidas uniformemente */

linear-gradient(90deg, red 0%, blue 100%)
/* Mesmo resultado com posições explícitas */

linear-gradient(90deg, red 0%, yellow 50%, blue 100%)
/* Três pontos: transição de vermelho para amarelo para azul */

linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%)
/* Transição abrupta em 50%: vermelho na metade esquerda, azul na direita */

O último exemplo mostra como criar bordas nítidas: coloque dois pontos de cor na mesma posição. O navegador renderiza a primeira cor até aquela posição e depois muda instantaneamente para a segunda cor.

Casos de Uso Comuns

Fundos de seção

Gradientes lineares são o tipo mais usado para fundos de site. Um gradiente sutil de cima para baixo adiciona profundidade sem distrair:

background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);

Botões e elementos de UI

Gradientes em botões criam uma aparência mais polida que cores sólidas. Combinar um gradiente sutil com border-radius dá a ilusão de um elemento iluminado:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Máscaras e sobreposições

Gradientes funcionam com mask-image para criar efeitos de fade-out. Combinar um gradiente com background-blend-mode permite sobreposições de cores que interagem com a imagem de fundo.

Verifique o Contraste

Gradientes podem reduzir o contraste entre texto e fundo. Teste seu gradiente com texto sobreposto em diferentes tamanhos. Se o texto for difícil de ler, escureça ou clareie as pontas do gradiente, ou adicione uma sombra de texto.

Performance

Gradientes CSS são renderizados pela GPU na maioria dos navegadores modernos. São mais eficientes que imagens de gradiente porque não exigem downloads adicionais e escalam sem perda de qualidade em qualquer resolução. Animar propriedades de gradiente (como ângulo ou posição) pode forçar re-renderizações. Prefira animar elementos sobrepostos com opacity ou transform para melhor performance.