Como criar gradientes CSS bonitos e prontos para usar
O gerador de gradiente CSS permite montar degradês visualmente e copiar o código pronto para o seu site. Você escolhe as cores, a posição de cada uma, o tipo de gradiente e o ângulo, e vê o resultado em tempo real. Também é possível baixar o gradiente como imagem PNG em Full HD para usar como fundo de slides, banners e papéis de parede.
Os três tipos de gradiente do CSS
- Linear (
linear-gradient): as cores mudam ao longo de uma linha reta. O ângulo define a direção: 0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo. - Radial (
radial-gradient): as cores se espalham a partir de um ponto central, em forma de círculo ou elipse. É ótimo para efeitos de luz e destaques. - Cônico (
conic-gradient): as cores giram em torno de um ponto, como em um relógio. É usado em gráficos de pizza, efeitos holográficos e bordas animadas.
Como usar o gerador
- Escolha um dos gradientes prontos ou clique em Aleatório para se inspirar.
- Clique na barra de cores para adicionar uma nova cor e arraste os marcadores para ajustar as posições.
- Selecione um marcador para trocar a cor e a opacidade.
- Defina o tipo, o ângulo ou o centro do gradiente.
- Copie o CSS ou baixe a imagem PNG.
Dicas para gradientes mais elegantes
- Combine cores próximas no círculo cromático (como azul e roxo) para transições suaves e naturais.
- Evite misturar cores complementares fortes (como vermelho e verde) diretamente: o meio da transição tende a ficar acinzentado. Inclua uma terceira cor intermediária.
- Use opacidade parcial para criar sobreposições sobre fotos, garantindo a legibilidade de textos.
- O código gerado inclui uma cor sólida antes do gradiente, que funciona como alternativa para navegadores muito antigos.
Compatibilidade
Gradientes lineares e radiais funcionam em todos os navegadores modernos sem prefixos. O gradiente cônico é suportado pelo Chrome, Edge, Firefox e Safari atuais. Não é mais necessário usar prefixos como -webkit-.