Gerador de gradiente CSS
Crie belos gradientes CSS visualmente — ajuste cores, paradas, direção e cópia o código CSS pronto para uso.
Paradas de cor
Saída CSS
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);Por que usar o gerador de gradientes PixConvert?
Criador visual de gradientes com saída CSS instantânea — sem necessidade de adivinhar valores hexadecimais.
Linear e Radial
Crie gradientes lineares com qualquer ângulo ou gradientes radiais com forma e posição configuráveis.
Paradas de várias cores
Adicione até 10 pontos de cor com posições arrastáveis. Compatível com qualquer cor CSS, incluindo rgba e hsla.
Controle de ângulo
Arraste o seletor de ângulo ou digite um valor exato em graus. As direções comuns (para a direita, para baixo à direita) são predefinidas.
Pré-visualização ao vivo
A pré-visualização do gradiente em largura total é atualizada em tempo real conforme você ajusta qualquer valor.
CSS pronto para colar
O resultado é uma string de propriedade de fundo CSS limpa, pronta para ser colada em qualquer folha de estilo.
Aleatorizar
Clique em Aleatorizar para inspiração instantânea — gera uma bela combinação de gradientes aleatórios.
Casos de uso de gradientes CSS
Os gradientes estão por toda parte no design de interface de usuário moderno.
Fundos de Heróis
Crie gradientes de fundo sofisticados para as seções principais da página de destino.
- Fundos de página inteira para heróis
- gradientes de divisores de seção
- Sobreponha gradientes em imagens
Estilo de botões e cartões
Adicione profundidade a botões, cartões e emblemas com preenchimentos de gradiente sutis.
- Gradientes do botão de ação principal
- Detalhes do cabeçalho do cartão
- A barra de progresso é preenchida.
Design de marca
Crie gradientes consistentes com a sua marca e que combinem com a sua paleta de cores.
- gradientes de fundo do logotipo
- Fundos de ícones de aplicativos
- Recursos de mídia social
Como criar um gradiente em CSS
Escolha o tipo linear, radial ou cônico. Selecione suas cores e ajuste as posições de parada. Defina o ângulo ou a direção.
A pré-visualização ao vivo é atualizada instantaneamente. Clique em Copiar CSS para cópia o valor de fundo CSS pronto para uso.
Alterne entre os tipos linear e radial e ajuste o ângulo ou a forma — cole o fundo resultante na sua folha de estilo.
Explore mais ferramentas
Descubra outras ferramentas gratuitas que funcionam muito bem em conjunto com esta.
Verificador de contraste
Verifique as taxas de contraste de cores para conformidade com as WCAG.
Gerador de sombras de caixa
Crie sombras em CSS com pré-visualização ao vivo.
Conversor de cores
Converta códigos de cores HEX, RGB e HSL instantaneamente.
Extrator de paleta de cores
Extraia as cores dominantes de qualquer imagem.
Formatador JSON
Formate, valide e minimize JSON instantaneamente.
Testador de expressões regulares
Teste e depure expressões regulares em tempo real.
Perguntas frequentes
Explicação sobre gradientes CSS.
O que é um gradiente CSS?
Um gradiente CSS é uma transição suave entre duas ou mais cores, definida em CSS puro, sem imagens. Tipos: gradiente linear (direcional), gradiente radial (circular/elíptico), gradiente cônico (rotacional em torno de um ponto central).
Preciso do prefixo -webkit-?
Não, para navegadores modernos (Chrome 26+, Firefox 16+, Safari 7+). O prefixo -webkit- só é necessário para navegadores muito antigos. Habilite-o nas opções se precisar de suporte para IE10/Safari em versões anteriores.
Como faço para criar um gradiente transparente?
Use cores rgba — por exemplo, rgba(0, 0, 0, 0) para transparente. Para fazer um degradê para transparente, defina o fim do efeito para rgba(255,255,255,0) para branco para transparente ou rgba(0,0,0,0) para preto para transparente.
Posso usar variáveis CSS em gradientes?
Sim, mas esta ferramenta visual gera valores hexadecimais/rgba. Para usar propriedades CSS personalizadas, cópia a saída e substitua manualmente os valores de cor pelas suas variáveis (por exemplo, var(--color-primary)).
Quais navegadores suportam gradiente cônico?
O gradiente cônico é compatível com Chrome 69+, Edge 79+, Safari 12.1+ e Firefox 83+. Não é compatível com o Internet Explorer. Use @supports (fundo: conic-gradient(red, blue)) para uma alternativa de aprimoramento progressivo.