Gradientes desfocados: cor em soft focus com ar moderno

Um gradiente desfocado é cor sem arestas: algumas formas suaves sobre um fundo, desfocadas até restar apenas luz a deslizar de um matiz para o seguinte. Parece uma fotografia tirada através de vidro fosco, ou uma lente fora de foco numa cidade iluminada. Essa suavidade é o motivo pelo qual serve aplicações de bem-estar, música, cosmética, tecnologia calma e fundos de ecrã. O método é simples: primeiro as formas, depois muito desfoque, depois grão. Os pormenores abaixo são a diferença entre sonhador e esborratado.

Gradientes desfocados versus gradientes aurora e mesh

Estes três confundem-se porque todos parecem suaves. Vêm de ideias diferentes, e escolher o certo muda o briefing.

Como fazer um gradiente desfocado

1. 1

   Escolhe um fundo

   Um branco sujo pálido para ficar arejado, um tinta profunda para ficar luminoso. O fundo preenche todos os vazios que as formas deixam.

2. 2

   Escolhe três ou quatro cores vizinhas

   Cores próximas no círculo, como rosa, lilás e azul-céu, misturam-se em intermédias limpas. Lê cores análogas para mais combinações.

3. 3

   Desenha formas grandes e sobrepostas

   Três a cinco círculos ou ovais, cada um a cobrir de um quarto a metade da tela. Deixa algumas sair pelas bordas.

4. 4

   Desfoca com força

   Aplica um desfoque gaussiano de cerca de 10 a 20 por cento do lado mais curto da tela. Numa publicação com 1080 píxeis de largura, são cerca de 110 a 220 píxeis.

5. 5

   Acrescenta grão

   Uma camada de ruído fino com 3 a 6 por cento de opacidade esconde o banding e evita que o resultado pareça plástico.

6. 6

   Confirma no tamanho do telemóvel

   Encolhe-o. Se alguma forma ainda tiver uma aresta visível, desfoca mais ou faz a forma maior.

Receitas de cor para gradientes desfocados

Cada amostra aproxima o aspeto final num único gradiente, para o copiares diretamente para CSS ou usares as cores como formas. Gradientes radiais elípticos com posições descentradas chegam surpreendentemente perto de um desfoque real.

Escolhe a família pelo que fica por cima. Os desfoques pálidos suportam bem o texto escuro e servem cosmética, papelaria, bem-estar e capas editoriais. Os escuros fazem o texto claro brilhar e servem vida noturna, música e eventos tardios. Um desfoque neutro como o linho funciona como fundo discreto para fotografias de produto, onde a cor nunca deve competir com o objeto. Para mais paletas suaves, vê gradientes sonhadores.

Quanto desfoque precisa um gradiente desfocado

A maioria dos gradientes desfocados falha por não ser desfocada o suficiente. Uma forma desfocada em 30 píxeis numa tela de 1080 píxeis continua a ser uma forma com a aresta suave, que se lê como uma mancha. O visual exige que o desfoque seja grande o bastante para não se perceber onde acaba uma forma.

Um gradiente desfocado em CSS

Na web tens dois caminhos. Gradientes radiais em camadas que se esbatem para transparente são baratos e renderizam de imediato. Elementos realmente desfocados parecem mais suaves e podem mover-se, mas custam mais a desenhar. Para um fundo estático, as camadas costumam bastar.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Se precisas de um painel fosco sobre um fundo desfocado e não do próprio fundo, isso é backdrop-filter, tratado em filtro de fundo CSS.

Porque é que os gradientes desfocados parecem baratos, e a solução

O banding é o que apanha toda a gente, porque um desfoque cria esbatidos longos e suaves por muitos píxeis. Um pouco de grão resolve; banding em gradientes explica porquê. E se duas das tuas cores se encontram em cinzento, troca uma por uma vizinha, como descrito em gradientes lamacentos.

Os Marks da Gradiently incluem materiais suaves e difusos com grão incorporado, e mantêm calma a zona atrás das tuas palavras, por isso um visual desfocado nunca engole o título. Podes desenhar de graça com qualquer Mark por reservar no Studio.