Gerador de papel de parede com degradê gratuito

Sobre os gradientes

Os gradientes CSS permitem criar transições de cores suaves sem imagens, o que reduz o tamanho dos arquivos e melhora o desempenho. Esta ferramenta gera tanto arquivos PNG para usar como papéis de parede quanto código CSS reutilizável em um site.

Perguntas frequentes

Qual a diferença entre gradientes linear, radial e cônico ?

Os gradientes lineares fluem em linha reta segundo um ângulo especificado. Os gradientes radiais irradiam a partir de um ponto central. Os gradientes cônicos giram ao redor de um ponto central como uma roda cromática. Cada um produz um efeito visual diferente.

Posso usar os gradientes CSS no meu site ?

Sim ! Os gradientes CSS são suportados em todos os navegadores modernos e não precisam de imagens. Adaptam-se a qualquer tamanho, carregam mais rápido e permanecem nítidos em qualquer tela. Copie o CSS gerado por esta ferramenta para suas folhas de estilo.

Quais são as melhores resoluções conforme meu dispositivo ?

Monitores de desktop usam geralmente 1920×1080, notebooks variam, telas 4K usam 3840×2160, iPhones 1080×1920 e iPads 2048×2732. Escolha a resolução que corresponde ao seu dispositivo para um papel de parede perfeitamente nítido.

Os gradientes na web, uma breve história

Os gradientes têm uma longa história pré-digital na impressão e na aerografia. O vocabulário de «gradiente» como uma rampa suave de uma cor a outra vem diretamente da cromolitografia e da arte de pôster com aerografia do final do século XIX; os estudantes de design da Bauhaus treinavam exercícios de rampa tonal na década de 1920, muito antes de qualquer pixel levar um deles a uma tela.

Os gradientes digitais chegaram em dois momentos adjacentes no início da década de 1990. O Adobe Photoshop 1.0 (fevereiro de 1990) trouxe uma ferramenta de gradiente desde o primeiro dia, um algoritmo de «mesclagem» que interpolava entre as amostras de primeiro plano e de fundo com queda linear e radial. O Adobe PostScript Level 2 (1991) introduziu os padrões de sombreamento como um recurso de primeira classe da linguagem; até então, o PostScript Level 1 não tinha como descrever um gradiente nativamente, e era preciso simulá-lo com preenchimentos em faixas de cinzas incrementais. O PostScript Level 3 (1997) acrescentou os sombreamentos em malha Type 6 (retalho de Coons) e Type 7 (produto tensorial) que alimentaram todo gradiente impresso na indústria de revistas do final dos anos 1990. A ferramenta de gradiente em malha do Adobe Illustrator veio na versão 8 (1998).

Os gradientes CSS na web chegaram mais tarde do que as pessoas lembram. O -webkit-gradient() do WebKit foi lançado no Safari 4 e no Chrome 1 em 2008, com uma sintaxe verbosa própria. O -moz-linear-gradient() da Mozilla veio no Firefox 3.6 (janeiro de 2010), usando a sintaxe que acabaria se tornando padrão. O linear-gradient() e o radial-gradient() sem prefixo chegaram à Candidate Recommendation do W3C em abril de 2012 e eram amplamente utilizáveis a partir de cerca de 2013. O conic-gradient() é muito mais novo: Chrome 69 em setembro de 2018 (atrás de uma flag), sem flag no Chrome 75 (junho de 2019), Firefox 83 (novembro de 2020). Agora está disponível como Baseline em todo navegador moderno.

Esqueumórfico, depois plano, depois gradiente de novo

Os gradientes se tornaram a linguagem visual do design web do final dos anos 1990 e início dos anos 2000: os botões vítreos, chanfrados e reflexivos da Web 2.0 da interface Apple Aqua (2000) eram, em essência, gradientes aninhados com um realce interno nítido sobre um suave esmaecimento do corpo. O movimento do design plano se cristalizou em torno do Metro da Microsoft (Windows Phone 7, 2010) e do iOS 7 da Apple (2013), reagindo contra o esqueumorfismo carregado de gradientes ao retirar toda sombra, chanfro e mesclagem da interface. Por cerca de cinco anos (2013-2018), os gradientes saíram de moda.

O pêndulo voltou com força de 2017 em diante. O gradiente em malha animado e multicor da Stripe na sua página inicial estabeleceu um modelo que toda a indústria de SaaS copiou. O rebranding do logo de 2016 do Instagram substituiu uma câmera plana por um gradiente saturado de rosa-laranja-roxo (um eco deliberado dos logos de fotografia dos anos 1980). No fim da década, os gradientes estavam onipresentes de novo, mas com um novo vocabulário: malhas, manchas desfocadas, suaves em OKLCH, conscientes de acessibilidade. O Tailwind CSS 4 (janeiro de 2025) trouxe um conjunto curado de utilitários de gradiente padrão, incluindo gradientes cônicos com dicas de interpolação de matiz.

A sintaxe de gradiente CSS em uma tela

As três funções de gradiente CSS recebem uma lista de paradas de cor e uma direção:

• linear-gradient(angle, colors…): o ângulo no CSS usa a convenção de rumo da bússola: 0deg aponta para cima (a primeira cor na parte de baixo), 90deg aponta para a direita, 180deg aponta para baixo (o padrão), 270deg aponta para a esquerda. Note que isto é o oposto do ângulo polar matemático. Você também pode usar palavras-chave: to top right calcula o ângulo de modo que a linha do gradiente passe pela diagonal, o que não é o mesmo que um gradiente de 135° em uma caixa não quadrada.
• radial-gradient(shape size at position, colors…): as cores se espalham para fora a partir de um ponto central. circle ou ellipse; palavras-chave de tamanho closest-side, farthest-corner; a posição tem como padrão o centro.
• conic-gradient(from angle at position, colors…): as cores giram no sentido horário em torno de um centro, como uma roda de cores. Útil para gráficos de pizza, efeitos de varredura e aquele visual de «gráfico de rosca». As variantes de repetição das três (repeating-linear-gradient etc.) ladrilham as paradas de cor infinitamente.

As paradas abruptas (colocar duas paradas de cor na mesma porcentagem) criam faixas nítidas em vez de mesclagens suaves: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) é uma divisão de duas cores, não um gradiente. Útil para listras, cartões com cor por seção ou pseudobordas.

A revolução do OKLCH e o ponto médio cinza-lamacento

Um gradiente do vermelho puro #ff0000 ao verde puro #00ff00 na interpolação sRGB padrão passa por um amarelo-marrom dessaturado e lamacento, em torno de #7f7f00. Isso acontece porque a interpolação linear do sRGB reduz tanto o canal R quanto o G no ponto médio, e os nossos olhos percebem o ponto médio como muito mais escuro e menos saturado que qualquer um dos extremos. O clássico ponto problemático do design web.

O CSS Color Module Level 4 acrescentou espaços de cor perceptualmente uniformes e a capacidade de interpolar gradientes neles: linear-gradient(in oklch, red, green). O OKLCH (e o seu irmão OKLab), projetado por Björn Ottosson em dezembro de 2020, separa luminosidade, chroma e matiz, de modo que interpolar ao longo do eixo do matiz pega o caminho curto em torno da roda de cores, preservando a saturação por todo o percurso. O mesmo gradiente de vermelho para verde no OKLCH passa por um amarelo vívido no ponto médio.

A regra geral:

• Dois matizes análogos (vermelho para laranja, azul para roxo): o sRGB e o OKLCH ficam parecidos; geralmente está tudo bem.
• Dois matizes complementares (vermelho para verde, azul para laranja): o sRGB produz um cinza lamacento, o OKLCH produz uma varredura de matiz vívida. O OKLCH vence de forma decisiva.
• Uma cor para branco ou preto: o sRGB fica encardido no ponto médio; o OKLCH mantém a luminosidade percebida mudando suavemente.
• Duas cores dessaturadas de luminosidade semelhante: diferença mínima.

Suporte dos navegadores: o interpolation-method para gradientes foi lançado no Safari 16.2 (dezembro de 2022), no Chrome 111 (março de 2023) e no Firefox 113 (maio de 2023), agora Baseline Widely Available.

Predefinições de resolução: escolha a contagem de pixels certa

Um papel de parede menor que a tela é esticado e fica embaçado; um que é muito maior desperdiça tamanho de arquivo e memória. Alvos comuns em 2026:

Resolução	Nome comum	Onde
1920×1080	Full HD / 1080p	Notebook e desktop mais comuns em 2026
2560×1440	QHD / 2K	Monitores populares de jogos e de criadores
3440×1440	UWQHD ultrawide	Monitores ultrawide curvos 21:9
3840×2160	4K / UHD	Desktops de ponta e Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Celular em retrato	Base genérica FHD para Android
1170×2532 / 1290×2796	iPhone moderno	Família iPhone 13-16 em 19,5:9
2048×2732	iPad Pro 12,9 polegadas	Tablets 4:3

Quando você recorreria a isto

• Papéis de parede para dispositivos pessoais: desktop, tela de bloqueio, tela inicial, até o fundo do mostrador de um smartwatch.
• Fundos virtuais de videoconferência. Os gradientes sólidos são mais fáceis para a segmentação automática do Zoom/Teams/Meet do que fotos movimentadas: eles reduzem o artefato de «halo» em torno de quem fala.
• Cabeçalhos de mídia social: Twitter/X 1500×500, LinkedIn 1584×396, banner de canal do YouTube 2560×1440 (com considerações de área segura), Instagram Stories 1080×1920.
• Gradientes de identidade de marca. A malha roxo-azul da Stripe, o rosa-laranja-roxo do Instagram, o verde-limão-para-verde-escuro do Spotify, o roxo-rosa do Slack, todos exemplos do mundo real de gradientes que definem marcas.
• Seções hero em páginas web: embora os gradientes CSS sejam geralmente aplicados diretamente via background-image, uma alternativa em PNG é útil para e-mails (a maioria dos clientes de e-mail ainda não renderiza gradientes CSS de forma confiável) e para navegadores sem a interpolação oklch.
• Estados vazios, esqueletos de carregamento, cartões de dashboard: superfícies de interface que se beneficiam de um leve interesse visual sem distrair.
• Impressão e produtos (merch). Um papel de parede 4K a 300 DPI cobre aproximadamente um pôster de 12 × 18 polegadas.

Acessibilidade: texto sobre gradientes

O erro prático mais comum com fundos em gradiente é falhar no contraste de qualquer texto sobreposto. O CS 1.4.3 da WCAG 2.2 (Contraste mínimo, Nível AA) exige 4,5:1 para o texto de corpo e 3:1 para texto grande (18 pt normal ou 14 pt em negrito). A WCAG foi escrita para fundos sólidos; com um gradiente, a taxa de contraste em cada ponto sob o texto importa: o pior ponto é o que conta.

Correções práticas quando você coloca texto sobre um gradiente: adicione um scrim preto ou branco semitransparente sob o texto, restrinja o gradiente sob o texto a uma faixa estreita de luminosidade, ou use um text-shadow forte como alternativa. Os gradientes verticais (escuro no topo, claro embaixo) costumam ser mais amigáveis ao texto que os diagonais: o texto que flui da esquerda para a direita encontra uma luminosidade de fundo constante em cada linha; um gradiente de 45° sob um bloco de texto longo força cada linha a atravessar a faixa de luminosidade, tornando o contraste consistente muito mais difícil.

Mais perguntas

Por que meu gradiente aparece com faixas?

Duas causas comuns. Primeira, a compressão JPEG: a codificação baseada em DCT do JPEG produz «blocagem» visível em rampas tonais suaves, especialmente em regiões de baixa saturação. Salve como PNG ou WebP sem perdas em vez disso. Segunda, a profundidade de cor de 8 bits por canal: um gradiente de 8 bits entre duas cores próximas tem apenas alguns passos tonais distintos, e o olho às vezes consegue distingui-los. Adicionar uma sutil sobreposição de ruído/dithering (1-2% de ruído) quebra as faixas adicionando variação natural; muitas ferramentas de design de ponta fazem isso automaticamente.

Devo usar linear, radial ou cônico para um papel de parede de desktop?

Para a maioria dos papéis de parede, o linear em uma leve diagonal (em torno de 135°) ou um radial centrado fora da tela fica melhor: eles criam assimetria sem distrair. Os gradientes cônicos são marcantes, mas passam a impressão de «feito por um designer» em vez de fundo ambiente, então são melhores para superfícies de destaque (capa de álbum, posts sociais) do que para papéis de parede que você vai encarar por oito horas por dia. Os gradientes em malha (vários gradientes radiais sobrepostos) são o visual mais moderno, mas exigem uma biblioteca JS ou uma imagem gerada; um único gradiente radial com dois matizes complementares em baixa saturação é uma boa aproximação.

Quais combinações de cores ficam melhor?

Três padrões confiáveis: o análogo (duas cores adjacentes na roda: roxo para azul, laranja para vermelho) passa uma sensação de calma e harmonia; o monocromático (o mesmo matiz, com luminosidade variável: o clássico azul da Stripe) passa uma sensação de marca e sutileza; o triádico-mais-OKLCH (três ou quatro cores igualmente espaçadas, interpoladas em um espaço perceptual) dá o visual moderno da Stripe / Instagram. Evite duas cores complementares puras (vermelho/verde, azul/laranja), a menos que esteja usando explicitamente a interpolação oklch(): o sRGB vai te dar um ponto médio lamacento.

Algo é enviado a um servidor?

Não. O gradiente é renderizado em um <canvas> no seu navegador, o PNG é exportado via canvas.toDataURL(), e a string CSS é gerada localmente em JavaScript. Nada sobre as suas escolhas de cor, dimensões ou a imagem resultante sai da página.

Ferramentas relacionadas