Gerador de Gradiente
Crie gradientes CSS incríveis com prévia ao vivo. Escolha entre predefinições ou personalize o seu. Copie o código CSS ou baixe como PNG.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Todo o processamento acontece no seu navegador. Nenhum dado é enviado para qualquer servidor.
Como Criar um Gradiente
Escolher o Tipo
Selecione o tipo de gradiente: linear, radial ou cônico.
Definir as Cores
Adicione paradas de cor e ajuste suas posições para refinar o seu gradiente.
Ajustar o Ângulo
Use o controle deslizante de ângulo para controlar a direção do gradiente.
Exportar
Copie o código CSS para o seu site ou baixe como imagem PNG.
Perguntas Frequentes
Que tipos de gradientes posso criar?
Você pode criar três tipos: gradientes lineares (transições de cor em linha reta), gradientes radiais (transições de cor circulares a partir do centro) e gradientes cônicos (transições de cor ao redor de um ponto central, como um gráfico de pizza).
Posso usar o código CSS gerado diretamente?
Sim! Clique no botão Copiar CSS para copiar o código do gradiente. Você pode colá-lo diretamente no seu arquivo CSS como propriedade de fundo. Funciona em todos os navegadores modernos.
Qual é o tamanho máximo de imagem que posso baixar?
Você pode definir o tamanho de saída de até 4096 x 4096 pixels. O padrão é 800 x 600 pixels, que funciona bem para a maioria dos fundos web.
Como funcionam as paradas de cor?
As paradas de cor definem as cores no seu gradiente e onde elas aparecem. Cada parada tem uma cor e uma posição (0-100%). Você precisa de pelo menos 2 paradas e pode adicionar mais para gradientes complexos.
Meus dados estão seguros?
Com certeza. Toda a geração de gradiente acontece inteiramente no seu navegador usando o Canvas. Nenhum dado é enviado para qualquer servidor, e nada é armazenado ou rastreado.
Casos de Uso
Fundos para Web Design
Crie seções hero, banners e fundos de página chamativos com gradientes CSS personalizados que combinam com sua marca.
Gráficos para Redes Sociais
Gere fundos de gradiente vibrantes para posts, stories e capas nas redes sociais que se destacam no feed.
Slides de Apresentação
Crie fundos de slides profissionais com transições de cor suaves que valorizam suas apresentações.
Elementos de Interface
Adicione fundos de gradiente a botões, cards, barras de navegação e outros componentes de UI para um visual moderno.
Design de E-mail
Baixe imagens de gradiente para cabeçalhos e fundos de e-mail onde gradientes CSS podem não ser suportados.
Design e Prototipagem de Apps
Prototipe telas de aplicativos rapidamente com fundos de gradiente. Exporte CSS para web ou PNG para mockups de apps nativos.
Crie o seu Gradiente Perfeito
Crie gradientes lindos com prévia ao vivo. Copie o CSS ou baixe como PNG — grátis e fácil.