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.
4.9 (2.8k ratings)
Sobre Gerador de gradiente
Gere gradientes CSS instantaneamente e gratuitamente. Crie gradientes lineares e radiais com várias cores. Personalize o ângulo, a posição e as paradas de cor. Copie o código CSS diretamente. Perfeito para design web e desenvolvimento de interfaces de usuário. Não requer cadastro - funciona 100% no seu navegador.
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.