0%
100%
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

Ferramentas relacionadas

Continue seu trabalho com estas ferramentas.

Extrator de cores de imagemExtrator de paleta de coresEncontre em uma imagem as cores para o seu próximo design.Comprimir e converter imagensCompressão e conversão de imagensAjuste o tamanho e o formato da imagem antes de compartilhar.Codificador Base64 e URLCodificar/decodificar Base64 · URLConverta texto para Base64 ou para o formato URL codificado.
Ver todas as ferramentas →

📐 Guia do gerador de gradiente CSS

O gerador de gradiente CSS da EVEDAYS é uma ferramenta visual e gratuita para web designers e desenvolvedores front-end. Combine cores em tempo real para gerar na hora um código de gradiente CSS bonito e copiá-lo. Tipos de gradiente compatíveis: • Linear: o gradiente mais comum, que liga dois pontos em linha reta. O ângulo pode ser ajustado livremente de 0° a 360°. • Radial: um gradiente circular que se espalha do centro para fora. Ótimo para dar profundidade a botões e fundos de cards. • Cônico (Conic): um gradiente em que as cores mudam girando em torno de um ponto central. Usado para criar gráficos de pizza e rodas de cores. Principais recursos: • Várias paradas de cor: adicione duas ou mais cores para criar gradientes complexos. • Controle de posição: ajuste com precisão a posição (%) de cada parada com controles deslizantes. • Predefinições: aplique combinações de gradiente populares com um clique. • Aleatório: gere combinações de cores aleatórias quando precisar de inspiração. • Pré-visualização ao vivo: todas as alterações aparecem na hora na pré-visualização.

🎨 Dicas de uso

• Seções hero de sites: usar um gradiente linear como fundo passa uma primeira impressão moderna e sofisticada. • Efeitos de hover em botões: aplicar gradientes diferentes ao estado padrão e ao hover cria uma sensação interativa. • Gradiente em texto: junto com background-clip: text, você pode aplicar gradientes ao texto. • Bordas de cards: aplicar um gradiente ao border-image cria bordas elegantes. • Animações de carregamento: aplicar animation a um gradiente cônico cria um indicador de carregamento giratório.

💡 Perguntas frequentes

P. Os gradientes funcionam em navegadores antigos? R. linear-gradient e radial-gradient são compatíveis com todos os navegadores modernos, incluindo IE10+. conic-gradient é compatível com Chrome 69+, Firefox 83+ e Safari 12.1+. P. Quantas paradas de cor posso adicionar? R. Não há limite técnico, mas recomendamos de 2 a 5 paradas por legibilidade e desempenho. P. Posso usar o código gerado comercialmente? R. Com certeza. Código de gradiente CSS não está sujeito a direitos autorais, então você pode usá-lo livremente.