O que é um gradiente
Um gradiente (ou degradê) é uma passagem suave de uma cor para outra. Na web é desenhado pelo browser a partir de uma única linha de CSS: não pesa nada a carregar, fica nítido em qualquer ecrã e acompanha o tamanho do elemento onde está. É por isso que há gradientes em todo o lado: topos de sites, botões, fundos de apps, modelos de stories e fundos de ecrã.
Este gerador escreve essa linha por ti e mostra exatamente o que ela desenha. Os mesmos números pintam o PNG, por isso a imagem que descarregas é igual à pré-visualização.
Linear, radial e cónico
Um gradiente linear corre em linha reta, num ângulo: 180° vai de cima para baixo, 90° da esquerda para a direita, 135° na diagonal. É a escolha calma e versátil para fundos.
Um gradiente radial espalha-se a partir de um ponto, como a luz de um candeeiro; põe o centro em cima para um efeito de holofote ou num canto para um brilho suave. Um gradiente cónico gira à volta de um ponto, como os ponteiros de um relógio — serve para rodas de cores, efeitos de gráfico circular ou um fundo abstrato forte. Repete a primeira cor no fim de um gradiente cónico para a emenda desaparecer.
O CSS, explicado
O código começa com uma cor de fundo sólida e depois vem o gradiente. Todos os browsers atuais mostram o gradiente; a primeira linha é uma reserva para o que não o mostre, como algumas apps de email. As cores são códigos hex e cada uma leva a sua posição em percentagem: “#ff7e5f 0%, #feb47b 100%” quer dizer a primeira cor no início e a segunda no fim. Põe duas cores quase na mesma posição para ter uma linha nítida em vez de uma mistura.
Usas Tailwind? O separador Tailwind dá o mesmo gradiente como classe de valor arbitrário, pronta a colar no teu HTML.
Escolher cores que se misturam bem
Os gradientes mais fáceis usam tons vizinhos — laranja para rosa, azul para verde-água — ou dois tons da mesma cor. Cores muito diferentes, como vermelho e verde, passam por um cinzento sujo a meio; junta uma terceira cor no meio para a mistura continuar viva. Num fundo onde as pessoas vão ler texto, mantém as cores com luminosidade parecida: a pré-visualização diz-te se o texto preto ou branco se lê melhor no gradiente todo.
Faltam ideias? Tira as cores da tua marca do gerador de paleta de cores, ou carrega em Aleatório algumas vezes — cada gradiente aleatório é feito com dois tons relacionados, por isso nunca parece um acaso.
Fundos de ecrã e fundos em gradiente
Os tamanhos de PNG cobrem os sítios habituais: 1080×1920 para fundo de ecrã do telemóvel, story do Instagram ou do TikTok e capa de Reel; 1080×1350 para uma publicação; 1080×1080 para um quadrado; 1920×1080 para o computador ou um fundo do YouTube; e 3840×2160 para um ecrã 4K. A imagem leva um grão quase invisível para que gradientes grandes e suaves não mostrem riscas (banding) nos ecrãs dos telemóveis.
Privado de origem
Tudo corre no teu browser. Nada do que crias é enviado, não há marca de água e podes usar o CSS e as imagens para o que quiseres, incluindo trabalho comercial.