Artigo completo
Os gradientes voltaram ao topo das tendências de design. Depois de anos dominados pelo flat design, interfaces modernas — de sistemas operativos a apps de banca — apostam em gradientes suaves para criar profundidade, hierarquia e um toque premium sem recorrer a imagens pesadas. O CSS oferece três tipos de gradientes nativos, todos suportados em qualquer navegador moderno.
O gradiente linear é o mais utilizado. Define-se por um ângulo (0° a 360°) e por uma sequência de pontos de cor. 0° aponta para cima, 90° para a direita, 180° para baixo. Um gradiente vertical simples (linear-gradient(180deg, #fff, #eee)) cria um efeito subtil de folha de papel; um diagonal (135deg) adiciona dinamismo.
O gradiente radial parte de um ponto central e expande-se para fora, criando efeitos de foco, brilho ou vinheta. É ideal para simular iluminação natural ou para destacar visualmente uma zona específica de um layout. Pode ser circular ou elíptico, e o ponto de origem também é configurável.
O gradiente cónico, mais recente, rotaciona as cores em torno de um ponto central como se fossem raios de uma roda. É perfeito para criar rodas de cor, indicadores de progresso circulares, efeitos artísticos e gráficos setoriais decorativos, tudo sem uma única linha de JavaScript.
Todos os tipos aceitam múltiplos pontos de cor, cada um com uma posição opcional. Ao mover um ponto para uma posição específica (por exemplo, 30%) controla-se a transição, permitindo criar efeitos de barra colorida, camadas de cor ou zonas de contraste. Combinar vários gradientes na mesma propriedade background — separados por vírgula — abre um universo de possibilidades como padrões, efeitos de tecido ou simulações de textura.
Este gerador simplifica todo o processo. Escolha o tipo, ajuste o ângulo com o cursor, adicione tantos pontos quanto precisar e veja o resultado atualizar-se em tempo real. Copie o CSS gerado ou exporte para um ficheiro pronto a incluir no seu projeto. Recomendamos que guarde os seus gradientes favoritos como variáveis CSS (--gradient-primary) para os reutilizar de forma consistente em toda a aplicação.
Combine com o nosso Gerador de Paletas para descobrir combinações harmoniosas e com o Gerador de Box Shadow para adicionar profundidade suplementar aos seus componentes.