A versão curta
- Um wallpaper em gradiente é uma transição suave de cores usada como fundo do computador ou do telemóvel, escolhida porque se mantém calma por trás de ícones, widgets e janelas.
- Faz os wallpapers de computador na resolução exata do ecrã e na sua forma, normalmente 16:9, e os de telemóvel altos, com altura para lá de 9:16.
- Os gradientes grandes e suaves são onde o banding mais se nota, por isso junta grão fino e exporta em PNG em vez de JPEG comprimido.
- Coloca a parte mais clara ou mais agitada do gradiente longe dos ícones, do relógio e dos widgets.
- Misturar as cores em OKLCH mantém vivos os gradientes arco-íris e complementares, em vez de ficarem cinzentos a meio.
Nesta página
Um wallpaper em gradiente é uma transição suave de cores usada como fundo de um computador ou telemóvel. Funciona porque não tem detalhes a competir com ícones, widgets e janelas, e muda o ambiente de um ecrã inteiro só com cor. Para fazer um bom: escolhe uma família de três a cinco cores, mistura-as com suavidade e com a luz onde queres que o olhar repouse, exporta no tamanho e na forma exatos do teu ecrã, e junta grão fino para que a transição fique suave em vez de mostrar riscas.
Abaixo encontras gradientes prontos a copiar, o método para fazeres o teu e como ajustar cada um a um ecrã. Para mais combinações de cores, vê combinações de cores para gradientes.
Ideias de wallpaper em gradiente com códigos
Cada um destes é um único gradiente CSS, por isso podes pré-visualizá-lo num navegador, adaptar as cores e exportá-lo em qualquer tamanho. Estão agrupados, de forma livre, do mais claro ao mais escuro.
Como fazer um wallpaper em gradiente
- 1
Descobre o tamanho do teu ecrã
Vê a resolução nas definições do ecrã e o tamanho do ecrã nas especificações do telemóvel. Desenha nesse tamanho exato, ou maior com a mesma forma.
- 2
Escolhe uma família de cores
Três a cinco cores com uma relação clara: tons vizinhos para calma, um par quente e frio para energia. As cores análogas são o caminho mais fácil.
- 3
Coloca a luz
Decide onde fica a zona mais clara. No computador, longe dos ícones; no telemóvel, normalmente por trás do relógio ou mais abaixo, ao centro.
- 4
Mistura com suavidade
Espalha as paragens e mistura em OKLCH se as cores estiverem afastadas na roda, para que o meio não fique cinzento.
- 5
Junta grão
Uma camada fina de ruído com pouca intensidade. Esconde o banding e torna a cor mais rica.
- 6
Exporta em PNG
A exportação sem perdas mantém a transição suave. Um JPEG muito comprimido é a causa mais comum das riscas.
Se quiseres construir um no navegador, aplica um gradiente numa página de ecrã inteiro e mistura-o em OKLCH. Os navegadores modernos suportam a interpolação de cor em gradientes, que mantém as cores vivas vivas até ao meio da transição.
<!doctype html>
<html>
<head>
<style>
html, body { margin: 0; height: 100%; }
body {
background:
radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
}
</style>
</head>
<body></body>
</html>Formas de wallpaper para computador e telemóvel
Um wallpaper fica melhor quando é feito para a forma do seu ecrã, e não cortado a partir de outro. A maioria dos monitores é 16:9 ou perto disso; os portáteis são muitas vezes um pouco mais altos, à volta de 16:10. Os telemóveis são muito mais altos do que 16:9: muitos andam à volta de 9:19,5. Desenha cada forma à parte e deixa a luz cair no sítio certo em cada uma.
Computador 16:9
1920 × 1080
Portátil 16:10
1600 × 1000
Telemóvel alto, cerca de 9:19,5
900 × 1950
Com dois ou mais monitores, podes pôr uma imagem por ecrã ou fazer uma imagem larga com a largura somada de ambos. A segunda opção deixa um único gradiente correr pela secretária, mas a junção entre os ecrãs vai cortá-lo, por isso mantém a luz longe dessa margem.
Os telemóveis acrescentam duas complicações: o relógio e os widgets do ecrã de bloqueio ficam sobre o terço de cima, e alguns telemóveis movem ligeiramente o wallpaper quando os inclinas, o que corta as margens. O tamanho do wallpaper para telemóvel trata das duas em pormenor.
Manter os wallpapers em gradiente suaves
Os wallpapers são mostrados em grande, muitas vezes em ecrãs luminosos e de alta qualidade, o que os torna o teste mais duro para um gradiente. Os dois problemas que vais ver são o banding, em que uma transição suave se parte em degraus visíveis, e os meios sujos, em que duas cores fortes se encontram em cinzento.
Causa riscas e sujidade
- Cores escuras e próximas numa área grande
- Compressão JPEG forte
- Cores complementares misturadas em sRGB
- Uma transição perfeitamente lisa sem ruído
Mantém-no suave
- Gama de cor suficiente ao longo da transição
- PNG ou exportação de alta qualidade
- Mistura em OKLCH, ou uma cor intermédia
- Grão fino sobre a imagem inteira
As explicações mais aprofundadas estão em banding em gradientes e gradientes sujos. Nos wallpapers, o grão é a solução mais simples: desfaz os degraus para que o olho veja uma só transição contínua e faz a cor digital lisa parecer película.
Wallpapers em gradiente escuros ou claros
Os wallpapers escuros cansam menos a vista à noite e fazem os ícones coloridos destacar-se; também criam faixas com mais facilidade, por isso o grão importa mais. Os wallpapers claros parecem arejados, mas podem dificultar a leitura do texto branco nos widgets. Se o teu telemóvel alterna entre aspeto claro e escuro, pensa num par: os mesmos tons, uma versão mais clara e outra mais profunda.
GR·N10S·5T
Cameo Bolero
Ver este MarkNa Gradiently, podes desenhar com qualquer Mark em tamanhos personalizados até 8000 píxeis no lado maior, por isso um visual pode tornar-se wallpaper de computador, portátil e telemóvel. Os Marks também exportam como vídeos em loop de 5 a 30 segundos se quiseres um wallpaper animado.
Perguntas frequentes
Que tamanho deve ter um wallpaper em gradiente?
A resolução exata do teu ecrã, ou maior com a mesma forma. Os computadores são normalmente 16:9 ou 16:10; os telemóveis são mais altos, muitas vezes à volta de 9:19,5, por isso confirma o teu modelo.
Porque é que o meu wallpaper em gradiente tem riscas?
Isso é banding: o ecrã mostra uma transição suave em degraus visíveis. Exporta em PNG, evita compressão forte e junta grão fino para o esconder.
Como faço um wallpaper em gradiente arco-íris que não pareça barato?
Usa parte do espectro em vez do espectro inteiro, mantém as cores com luminosidade semelhante e mistura em OKLCH para que as cores fiquem vivas entre as paragens.
Os wallpapers escuros são melhores para o telemóvel?
São mais fáceis de ver com pouca luz e fazem os ícones destacar-se. Em telemóveis com ecrã OLED, os wallpapers escuros também podem gastar um pouco menos de energia, mas escolhe aquele para o qual gostas de olhar.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
