Gerador de Gradiente

Escolha duas ou mais cores, arraste o gradiente a gosto e copie o CSS. Ou baixe como PNG para usar como papel de parede, fundo de slide ou pano de fundo para posts em redes sociais. Gradientes lineares, radiais e cônicos são suportados, além de um modo de gradiente mesh para os fundos suaves estilo Apple que você vê em UIs modernas.

Tipos de gradiente explicados

• Linear: linha reta da cor A para a cor B. Seletor de direção (cima→baixo, diagonal, etc.).
• Radial: concêntrico — cor A no centro desbotando para cor B nas bordas. Útil para efeitos de foco.
• Cônico: gira em torno de um ponto central como uma roda de cores. Moderno em design de UI.
• Mesh (premium): múltiplas bolhas de cor mescladas suavemente. O visual 'Apple gradient'.

O que você pode copiar

1. CSS: declaração linear-gradient(...) ou background-image: pronta para colar.
2. Tailwind: a classe bg-gradient-* mais próxima, além de adições de cores personalizadas.
3. SVG: para uso escalável em ícones ou gráficos de UI.
4. Download PNG: qualquer tamanho, incluindo papel de parede de celular (1284×2778), desktop (3840×2160) e quadrado (1080×1080).

Casos de uso comuns

• Papéis de parede de celular: gradientes mesh são enormes no iOS. Experimente nossa Pré-visualização de Papel de Parede iPhone para testar.
• Fundos para posts em redes sociais: visual instantâneo alinhado à marca para gráficos de citações.
• Seções hero: fundos gradientes estão em toda parte em landing pages.
• Decks de slides: substitua fundos sólidos sem graça.

Escolhendo cores que funcionam

Cores adjacentes na roda de cores = sutis, harmoniosas. Opostas = ousadas, atraentes. Adicione um terceiro ponto intermediário para preencher uma grande lacuna. Para gradientes fiéis à marca, cole o HEX da sua marca e escolha um tom ou matiz para o segundo ponto. Use nosso Conversor de Cores para encontrar matizes (HSL com luminosidade maior) ou sombras (menor).