# Fundos aesthetic: como criar o seu [Canonical HTML page](https://gradiently.design/pt-br/guide/aesthetic-backgrounds) Fundos baixados são compartilhados por todo mundo que achou a mesma página. Criar o seu leva uma tarde, e o resultado combina com o seu celular, o seu desktop e os seus posts. ## The short version - Um fundo aesthetic costuma ser um campo suave de cor, com pouco contraste, luz delicada e um pouco de textura, e não uma imagem carregada. - A maioria dos visuais aesthetic vem de uma paleta estreita: de três a cinco cores próximas em luminosidade, com um tom um pouco mais profundo para dar volume. - Um toque de grão faz os gradientes suaves parecerem filme ou papel e esconde as listras que os gradientes lisos podem mostrar. - Crie um visual e exporte para cada formato que você usa, como um fundo de celular de 1080 por 1920, um desktop de 1920 por 1080 e um post de 1080 por 1350. - Mantenha a área mais calma do fundo onde ficarão relógios, ícones ou palavras. Na prática, um **fundo aesthetic** é um campo suave de cor com luz delicada e um pouco de textura: uma névoa de pêssego, uma manhã de sálvia, um entardecer lavanda, um marrom escuro com cara de filme. Para criar o seu, escolha de três a cinco cores próximas em luminosidade, misture-as suavemente com uma fonte de luz delicada, acrescente um toque de grão e exporte o mesmo visual para cada tela e formato que você usa. O resultado parece calmo, pessoal e coerente, que é quase tudo o que as pessoas querem dizer com aesthetic. Este guia traz paletas prontas com códigos, o método para criar as suas e um conjunto de tamanhos para que celular, desktop e posts combinem. Para entender melhor as cores por trás disso, veja [gradientes pastel](https://gradiently.design/pt-br/guide/pastel-gradients) e o [básico da teoria das cores](https://gradiently.design/pt-br/guide/color-theory-basics). ## O que faz um fundo parecer aesthetic Olhe de perto os fundos que as pessoas salvam e compartilham e as mesmas características aparecem sempre. Nenhuma delas tem a ver com uma cor específica: tem a ver com contenção. - **Baixo contraste.** As cores ficam próximas em luminosidade, então nada salta aos olhos. - **Transições suaves.** As misturas são longas e graduais, sem bordas duras. - **Uma fonte de luz.** Uma área é um pouco mais clara, como a luz de uma janela, o que dá profundidade ao campo. - **Textura.** Um grão fino ou a trama do papel faz parecer físico, e não digital. - **Espaço.** Não há nada para olhar, e é exatamente isso que o deixa bom atrás de ícones, palavras e fotos. - Névoa de pêssego: `linear-gradient(160deg, #fde2d4 0%, #f9c6c9 50%, #e8c5e5 100%)` - Manhã de sálvia: `linear-gradient(180deg, #eef2e6 0%, #cfdcc4 55%, #a9bfa3 100%)` - Entardecer lavanda: `linear-gradient(165deg, #e9e4ff 0%, #c9bdf2 50%, #9d8fd9 100%)` - Luz de manteiga: `radial-gradient(circle at 30% 20%, #fff6d6 0%, #fbe3a4 45%, #f2c78b 100%)` - Azul-nuvem: `linear-gradient(180deg, #f3f7ff 0%, #d7e6fb 50%, #b9cfee 100%)` - Rosa bailarina: `linear-gradient(180deg, #fff0f3 0%, #fbd3dc 55%, #f2aebf 100%)` - Dark academia: `linear-gradient(170deg, #4a3b33 0%, #2e241f 55%, #171210 100%)` - Filme da meia-noite: `radial-gradient(ellipse at 70% 20%, #3a3560 0%, #1c1a33 50%, #0d0c18 100%)` Oito fundos aesthetic como gradientes CSS únicos. Cada um mantém as cores próximas em luminosidade, e é isso que os deixa calmos. Os visuais claros e escuros seguem as mesmas regras ao contrário. Os claros mantêm todas as cores pálidas e deixam um tom um pouco mais profundo se juntar numa borda. Os escuros mantêm tudo profundo e deixam uma única poça mais quente ou mais brilhante fazer o papel da luz, como um abajur num quarto na penumbra. Fundos escuros precisam ainda mais de grão, porque o banding aparece mais nas sombras; os [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) aprofundam o assunto. ## Como criar o seu próprio fundo aesthetic 1. **Escolha uma palavra de clima** Uma ou duas palavras: *domingo devagar*, *manhã à beira-mar*, *biblioteca antiga*. Climas levam a paletas com mais segurança do que nomes de cores. 2. **Reúna de três a cinco cores** Colete-as de uma foto que tenha o clima, ou monte-as à mão. Mantenha-as próximas em luminosidade, com um tom um pouco mais profundo. [Tirar uma paleta de uma foto](https://gradiently.design/pt-br/guide/color-palette-from-image) mostra como. 3. **Escolha a direção da luz** Decida de onde vem a luz, em geral do topo ou de um canto superior. Coloque a cor mais clara ali e deixe o resto se afastar dela. 4. **Misture com suavidade** Use transições longas com as paradas bem espaçadas, ou algumas poças radiais sobrepostas para um campo mais suave, como uma nuvem. Evite paradas bruscas. 5. **Acrescente grão** Um pouco de ruído sobre a imagem toda. O bastante para sentir, mas não para ver à distância de um braço. Os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) explicam por que funciona. 6. **Exporte para cada formato** Renderize o visual em cada tamanho de que precisa, em vez de recortar uma imagem só, para que a luz fique no lugar certo. - Linho: #fbe9dd - Leite de damasco: #f4d3c2 - Argila rosa: #e9bfb4 - Malva empoeirado: #d7b8c9 - Profundidade: sombra de ameixa: #a88ca6 Uma paleta pronta para o clima *domingo devagar*: quatro tons quentes e próximos e uma ameixa mais profunda que dá volume nas bordas. > **Por que fundos suaves ganham banding** Gradientes delicados com cores próximas são exatamente onde as telas mostram listras, sobretudo em tons escuros e em imagens comprimidas. O grão as esconde. Se você vir faixas, leia sobre o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding). ## Fundos aesthetic para celular, desktop e posts O objetivo de criar o seu é que tudo possa combinar. Crie um visual e exporte para cada lugar onde ele vive. Os celulares são os mais altos: muitas telas modernas são mais altas que 9:16, então exporte o fundo do celular com altura extra, ou confira o tamanho exato da sua tela, como explica o guia de [tamanho de papel de parede de celular](https://gradiently.design/pt-br/guide/phone-wallpaper-size). - Fundo de celular 1080×1920: 1080 × 1920 - Desktop 1920×1080: 1920 × 1080 - Post 1080×1350: 1080 × 1350 - Quadrado 1080×1080: 1080 × 1080 Um aesthetic, quatro exportações. Posicione a luz para cada formato em vez de recortar uma imagem só. Cada formato tem as suas zonas cheias. Na tela de bloqueio do celular, o relógio fica perto do topo e as notificações no meio. No desktop, os ícones costumam ocupar uma borda. Num post, as palavras precisam de uma área calma. Mova a fonte de luz para que a parte mais calma do campo fique sob esses elementos. Um post em retrato com um título curto sobre um fundo de gradiente suave e quente Um post no estilo aesthetic: as palavras ficam na área calma do alto. Um story vertical com uma frase curta sobre o mesmo gradiente suave do post O mesmo visual como story, renderizado para o formato mais alto, e não recortado. ## Como evitar que fique genérico Gradientes pastel suaves são populares, o que significa que os padrões estão por toda parte. Algumas escolhas pequenas fazem o seu ser reconhecivelmente seu. ### Genérico - Um preset de duas cores de um gerador - Perfeitamente liso, sem textura - Iluminado por igual de canto a canto - Um visual diferente para celular, desktop e posts ### Seu - Quatro ou cinco cores do seu próprio clima - Grão fino, como filme ou papel - Uma fonte de luz bem clara - Um só visual renderizado para cada formato Se você prefere partir de algo já trabalhado, o Mercado do Gradiently tem milhares de Marks, fundos de gradiente vivos com cor, material, luz, grão e movimento, que você pode buscar por palavras de cor como “pêssego suave” ou “verde-petróleo profundo” e usar de graça nos seus designs. O Studio então pode organizar o mesmo visual para o seu celular, o seu desktop e os seus posts. ## FAQ ### O que faz um fundo ser aesthetic? Em geral, uma paleta suave e de baixo contraste, transições delicadas, uma única fonte de luz e um pouco de textura, como o grão. É a contenção, e não uma cor específica, que dá o visual. ### Como faço um papel de parede aesthetic para o celular? Escolha de três a cinco cores próximas, misture-as com suavidade com a luz perto do topo, acrescente grão fino e exporte num tamanho alto, com altura extra para celulares mais altos que 9:16. ### Quais cores são aesthetic? Qualquer uma pode ser, se ficarem próximas em luminosidade e saturação. Famílias populares incluem pêssego e rosa, sálvia e creme, lavanda e azul-acinzentado, e marrons profundos para climas mais escuros. ### Por que o meu fundo suave tem listras? Gradientes lisos entre cores próximas mostram banding em muitas telas, sobretudo depois da compressão. Acrescentar grão fino e exportar em alta qualidade costuma escondê-lo.