Crie gradientes CSS impressionantes com pré-visualização em tempo real e código pronto para uso
background: linear-gradient(45deg, #ff7e5f 0%, #feb47b 100%);Perfeito para secções hero e cabeçalhos de página
Botões apelativos e chamadas para ação
Fundos subtis para cartões e secções
Tudo o que precisa para criar gradientes bonitos para design web moderno
Crie gradientes lineares, radiais, cônicos e multi-paragem com controlo total
Veja o seu gradiente instantaneamente enquanto desenha com atualizações de pré-visualização ao vivo
Copie código CSS pronto para produção com prefixos de fornecedores para compatibilidade
Aceda a coleções de gradientes pré-construídas e combinações de cores em tendência
Comece com modelos bonitos e personalize para corresponder às suas necessidades de design
Exporte como CSS, SVG, PNG ou copie URLs diretas para uso imediato
Copie instantaneamente o CSS do gradiente para a área de transferência para implementação rápida
Pré-visualize como os gradientes aparecem em diferentes tamanhos de ecrã e dispositivos
Escolha o tipo de gradiente certo para as suas necessidades de design
As cores transitam em linha reta de um ponto para outro
Perfeito para fundos, botões e criação de profundidade
linear-gradient(45deg, #667eea 0%, #764ba2 100%)As cores irradiam para fora a partir de um ponto central num padrão circular ou elíptico
Ótimo para efeitos de holofote, orbes e pontos focais
radial-gradient(circle, #667eea 0%, #764ba2 100%)As cores transitam à volta de um ponto central, criando um efeito semelhante a um cone
Ideal para gráficos de pizza, spinners de carregamento e efeitos artísticos
conic-gradient(from 0deg, #667eea, #764ba2, #667eea)Dicas profissionais para criar gradientes eficazes nos seus designs
Use cores com valores semelhantes de luminosidade e saturação. Evite saltos entre matizes muito diferentes. Considere usar cores intermédias como paragens entre cores contrastantes para criar transições mais suaves.
Os gradientes lineares transitam cores numa linha reta (horizontal, vertical ou diagonal), enquanto os gradientes radiais irradiam para fora a partir de um ponto central num padrão circular ou elíptico.
Sim! Use background-clip: text e -webkit-background-clip: text com uma cor de texto transparente para aplicar gradientes ao texto. Isso cria efeitos de texto gradiente bonitos.
Os gradientes CSS são inerentemente responsivos e escalam com o seu recipiente. Também pode alterar propriedades de gradiente usando media queries para diferentes tamanhos de ecrã ou usar propriedades personalizadas CSS para controlo dinâmico.
Sim, os gradientes CSS são geralmente melhores porque são escaláveis, leves, não requerem pedidos HTTP, podem ser facilmente modificados e são mais acessíveis do que imagens.
Embora não haja um limite estrito, usar muitas paragens de cor pode afetar o desempenho. Geralmente, 2-5 paragens de cor funcionam bem para a maioria dos designs. Mais paragens podem ser necessárias para efeitos artísticos complexos.
Explore mais ferramentas de design e cores