Gerador de gradiente
Tipo de gradiente
Configurações
Paradas de cor
Predefinições
Pré-visualização
Código CSS
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Informe-nos
Por favor, compartilhe sua experiência.
Ferramentas semelhantes
135 graus significa canto superior-esquerdo para inferior-direito
A convenção de ângulo confunde todo mundo uma vez: em CSS, 0deg aponta para cima e os graus giram no sentido horário, então o cavalo de batalha 135deg flui do canto superior-esquerdo para o inferior-direito — é por isso que quase todo fundo hero diagonal usa esse valor. Cada parada de cor carrega uma posição de 0-100 %: aproximar as duas paradas de um gradiente azul-violeta (digamos 20 % e 80 %) cria uma faixa suave, enquanto uma parada em 0 % faz a cor começar firme na borda. O botão Aleatório pula entre paletas completas quando se precisa de um ponto de partida para refinar, não de uma página em branco.
Banding, paradas duras e gêmeos de modo escuro
Três problemas de qualidade separam um gradiente amador de um de produção. Gradientes sutis em superfícies grandes podem fazer banding — linhas de contorno visíveis — especialmente em telas de pouca profundidade de bits; alargar a distância entre paradas ou afastar levemente os dois tons costuma escondê-lo. Colocar duas cores diferentes na mesma posição cria uma parada dura — é assim que se fazem listras, não fusões. E um gradiente afinado para página clara muitas vezes fica turvo numa escura: o modo escuro precisa da sua própria dupla, tipicamente com tons médios mais luminosos, guardada como variante separada.
Sobre Gerador de gradiente
Gradientes viraram o fundo padrão do web moderno — banners hero, botões de chamada, telas de carregamento, cabeçalhos de cartão — e cada um é uma linha de CSS especificando cores, suas posições de parada e uma direção. Escrever essa linha à mão é possível; iterá-la a olho é mais rápido. O gerador existe para a iteração: arraste as paradas, alterne entre linear e radial, e leia o CSS pronto direto na ferramenta.
Como usar
Passo 1
Selecione o tipo de gradiente: Linear, Radial ou Cônico.
Passo 2
Adicione e personalize paradas de cor (mínimo de 2 cores)
Passo 3
Ajuste as configurações específicas do tipo (ângulo, formato, posição)
Passo 4
Visualize seu gradiente em tempo real.
Passo 5
Use predefinições para inspiração rápida ou gere gradientes aleatórios.
Passo 6
Copie o código CSS para usar em seus projetos.
Características e benefícios
- ✅3 tipos de gradiente: Linear, Radial e Cônico.
- ✅Paradas de cores ilimitadas com controle de posição
- ✅Personalização completa: cores, ângulos, formas, posições.
- ✅8 predefinições incríveis: Pôr do Sol, Oceano, Floresta, Sonho Roxo, Fogo, Azuis Suaves, Arco-Íris, Pêssego
- ✅Gerador de gradiente aleatório para inspiração
- ✅Pré-visualização em tempo real enquanto você personaliza.
- ✅Copiar código CSS para a área de transferência com um clique
- ✅Arraste os controles deslizantes para ajustar as posições das cores.
- ✅100% gratuito - sem marcas d'água, sem necessidade de cadastro
- ✅Funciona offline - toda a geração ocorre no seu navegador.
Perguntas frequentes
Quais tipos de gradiente são suportados?
Oferecemos suporte a 3 tipos de gradientes CSS: Linear (gradientes em linha reta com ângulo ajustável de 0 a 360°), Radial (gradientes circulares ou elípticos a partir de um ponto central) e Cônico (gradientes circulares que giram em torno de um ponto central, perfeitos para gráficos de pizza e círculos cromáticos).
Como adiciono mais cores ao meu gradiente?
Clique no botão '+' na seção Paradas de Cor para adicionar uma nova cor. Você pode adicionar quantas cores quiser. Cada parada de cor possui um controle deslizante de posição (0-100%) para controlar onde ela aparece no gradiente. Para remover uma cor, clique no ícone da lixeira (mínimo de 2 cores).
Qual a diferença entre os tipos de gradiente?
Os gradientes lineares fazem a transição de cores em linha reta, num ângulo específico. Os gradientes radiais irradiam de um ponto central para fora, descrevendo um círculo ou uma elipse. Os gradientes cônicos giram as cores em torno de um ponto central, como uma roda de cores, sendo úteis para gráficos de pizza e designs circulares.
Como faço para usar o código CSS gerado?
Clique no botão 'Copiar' para copiar o código CSS para a sua área de transferência. Em seguida, cole-o no seu arquivo CSS ou atributo de estilo. O código inclui a propriedade background completa, por exemplo: background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Posso salvar meus gradientes?
A ferramenta não armazena gradientes, mas você pode copiar o código CSS e salvá-lo nos arquivos do seu projeto. Você também pode adicionar configurações de gradiente específicas aos favoritos, salvando o código CSS em um arquivo de texto ou sistema de design.
Quais são os gradientes predefinidos?
Oferecemos 8 predefinições de gradiente com design profissional: Pôr do Sol (vermelho quente para amarelo), Oceano (azul profundo para ciano), Floresta (verde-azulado para verde), Sonho Roxo (roxo para rosa), Fogo (amarelo radial para vermelho), Azuis Frios (gradiente azul), Arco-Íris (espectro completo cônico) e Pêssego (tons suaves de pêssego). Clique em qualquer predefinição para aplicá-la instantaneamente.
Como funciona o gerador de gradiente aleatório?
Clique no botão "Gradiente Aleatório" para gerar um gradiente completamente aleatório com 2 a 4 pontos de cor, cores aleatórias e um tipo de gradiente aleatório. É perfeito para encontrar inspiração ou descobrir combinações de cores inesperadas.
Posso ajustar a posição de cada cor?
Sim! Cada ponto de cor possui um controle deslizante de posição que define onde a cor aparece no gradiente (0-100%). Arraste o controle deslizante ou insira um valor específico para ajustar as transições de cor. Cores mais próximas criam transições mais nítidas, enquanto cores mais distantes criam transições mais suaves.