Resumindo
- Um papel de parede com gradiente é uma mistura lisa de cores usada como fundo de computador ou celular, escolhida porque continua calma atrás de ícones, widgets e janelas.
- Faça os papéis de parede de computador na resolução exata da tela e no formato dela, em geral 16:9, e os de celular altos, com altura extra além de 9:16.
- Gradientes grandes e lisos são onde o banding mais aparece, então adicione grão fino e exporte em PNG em vez de um JPEG comprimido.
- Deixe a parte mais clara ou mais agitada do gradiente longe de onde ficam os ícones, o relógio e os widgets.
- Misturar as cores em OKLCH mantém vivos os gradientes arco-íris e de cores complementares, em vez de ficarem cinza no meio.
Nesta página
Um papel de parede com gradiente é uma mistura lisa de cores usada como fundo de computador ou celular. Funciona porque não tem detalhes para competir com ícones, widgets e janelas, e muda o clima da tela inteira só com a cor. Para fazer um bom: escolha uma família de três a cinco cores, misture-as com suavidade com a luz onde você quer que o olho descanse, exporte no tamanho e no formato exatos da sua tela e adicione grão fino para a mistura continuar lisa em vez de mostrar listras.
Abaixo você encontra gradientes prontos para copiar, o método para fazer o seu e como ajustar cada um a uma tela. Para mais combinações de cores, veja combinações de cores para gradiente.
Ideias de papel de parede com gradiente, com códigos
Cada um destes é um único gradiente CSS, então você pode ver a prévia em um navegador, adaptar as cores e exportá-lo em qualquer tamanho. Estão agrupados de modo aproximado, do mais claro ao mais escuro.
Como fazer um papel de parede com gradiente
- 1
Descubra o tamanho da sua tela
Veja a resolução nas configurações do monitor e o tamanho da tela nas especificações do celular. Projete nesse tamanho exato, ou maior no mesmo formato.
- 2
Escolha uma família de cores
De três a cinco cores com uma relação clara: matizes vizinhos para calma, um par quente e frio para energia. As cores análogas são o caminho mais fácil.
- 3
Posicione a luz
Decida onde vai a área mais clara. No computador, longe dos ícones; no celular, em geral atrás do relógio ou embaixo, no centro.
- 4
Misture com suavidade
Espalhe as paradas e misture em OKLCH se as cores estiverem distantes no círculo, para o meio não ficar cinza.
- 5
Adicione grão
Uma camada de ruído fino com pouca intensidade. Ela esconde o banding e faz a cor parecer mais rica.
- 6
Exporte em PNG
A exportação sem perdas mantém a mistura lisa. Um JPEG muito comprimido é a causa mais comum de listras.
Se quiser montar um no navegador, aplique um gradiente a uma página em tela cheia e misture-o em OKLCH. Os navegadores modernos aceitam a interpolação de cor em gradientes, que mantém vivas as cores vivas no meio da mistura.
<!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>Formatos de papel de parede para computador e celular
Um papel de parede fica melhor quando é feito para o formato da sua tela, e não recortado de outro. A maioria dos monitores é 16:9 ou próximo disso; notebooks costumam ser um pouco mais altos, em torno de 16:10. Celulares são bem mais altos que 16:9: muitos ficam perto de 9:19,5. Projete cada formato separadamente e deixe a luz cair no lugar certo em cada um.
Computador 16:9
1920 × 1080
Notebook 16:10
1600 × 1000
Celular alto, cerca de 9:19,5
900 × 1950
Com dois ou mais monitores, você pode definir uma imagem por tela ou fazer uma imagem larga com a largura somada das duas. A segunda opção deixa um único gradiente fluir pela mesa, mas a junção entre as telas vai cortá-lo, então mantenha a luz longe dessa borda.
Os celulares acrescentam duas complicações: o relógio da tela de bloqueio e os widgets ficam sobre o terço de cima, e alguns celulares movem o papel de parede um pouco quando você inclina o aparelho, o que recorta as bordas. Tamanho de papel de parede de celular trata dos dois em detalhe.
Como manter os papéis de parede com gradiente lisos
Papéis de parede aparecem grandes, muitas vezes em telas claras e de alta qualidade, o que os torna o teste mais duro de um gradiente. Os dois problemas que você vai ver são o banding, em que uma mistura lisa se quebra em degraus visíveis, e os meios sujos, em que duas cores fortes se encontram em cinza.
Causa listras e sujeira
- Cores próximas e escuras em uma área grande
- Compressão JPEG pesada
- Cores complementares misturadas em sRGB
- Uma mistura perfeitamente lisa, sem ruído
Mantém liso
- Faixa de cor suficiente ao longo da mistura
- Exportação em PNG ou de alta qualidade
- Mistura em OKLCH, ou uma cor intermediária
- Grão fino sobre a imagem toda
As explicações mais profundas estão em banding em gradientes e em gradientes sujos. Para papéis de parede, o grão é a correção mais simples: ele quebra os degraus para o olho ver uma mistura contínua e faz a cor digital chapada parecer filme.
Papéis de parede com gradiente escuros ou claros
Papéis de parede escuros cansam menos os olhos à noite e fazem os ícones coloridos se destacarem; também formam faixas com mais facilidade, então o grão importa mais. Os claros parecem leves, mas podem dificultar a leitura do texto branco nos widgets. Se o seu celular alterna entre aparência clara e escura, considere um par: os mesmos matizes, uma versão mais clara e outra mais profunda.
GR·N10S·5T
Cameo Bolero
Ver este MarkNo Gradiently, você pode projetar com qualquer Mark em tamanhos personalizados de até 8.000 pixels no lado maior, então um só visual pode virar papel de parede de computador, de notebook e de celular. Os Marks também exportam como vídeos em loop de 5 a 30 segundos, se você quiser um papel de parede animado.
Perguntas frequentes
Que tamanho deve ter um papel de parede com gradiente?
A resolução exata da sua tela, ou maior no mesmo formato. Computadores costumam ser 16:9 ou 16:10; celulares são mais altos, muitas vezes por volta de 9:19,5, então confira o seu modelo.
Por que meu papel de parede com gradiente tem listras?
Isso é banding: a tela mostra uma mistura lisa em degraus visíveis. Exporte em PNG, evite a compressão pesada e adicione grão fino para escondê-lo.
Como fazer um papel de parede arco-íris que não pareça barato?
Use parte do espectro em vez dele inteiro, mantenha as cores com luminosidade parecida e misture em OKLCH para as cores continuarem vivas entre as paradas.
Papéis de parede escuros são melhores para o celular?
São mais fáceis de olhar com pouca luz e fazem os ícones se destacarem. Em celulares com tela OLED, os escuros também podem gastar um pouco menos de bateria, mas escolha o que você gosta de olhar.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
