Degradê desfocado: cor em foco suave com cara de moderno

Um degradê desfocado é cor sem bordas: algumas formas suaves sobre um fundo, desfocadas até sobrar só luz passando de um tom para o outro. Parece uma foto tirada através de vidro jateado, ou uma lente fora de foco numa cidade iluminada. Essa suavidade é o motivo de ele combinar com apps de bem-estar, música, skincare, tecnologia tranquila e papéis de parede. O método é simples: formas primeiro, depois muito desfoque, depois grão. Os detalhes abaixo fazem a diferença entre sonhador e borrado.

Degradê desfocado, aurora e mesh

Esses três se confundem porque todos parecem suaves. Eles vêm de ideias diferentes, e escolher o certo muda o briefing.

Como fazer um degradê desfocado

1. 1

   Escolha um fundo

   Um off-white pálido para algo arejado, uma tinta profunda para algo que brilha. O fundo preenche cada espaço que as formas deixam.

2. 2

   Escolha três ou quatro cores vizinhas

   Cores próximas no círculo, como rosa, lilás e azul-céu, se misturam em tons intermediários limpos. Leia cores análogas para mais combinações.

3. 3

   Desenhe formas grandes e sobrepostas

   De três a cinco círculos ou ovais, cada um cobrindo de um quarto a metade da tela. Deixe alguns passarem das bordas.

4. 4

   Desfoque com força

   Aplique um desfoque gaussiano de cerca de 10 a 20 por cento do lado menor da tela. Num post de 1080 pixels de largura, isso dá de 110 a 220 pixels.

5. 5

   Adicione grão

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

6. 6

   Confira no tamanho do celular

   Reduza a imagem. Se alguma forma ainda tiver borda visível, desfoque mais ou aumente a forma.

Receitas de cor para degradê desfocado

Cada amostra aproxima o visual final num único degradê, então você pode copiar direto para o CSS ou usar as cores como suas formas. Degradês radiais elípticos em posições fora do centro chegam surpreendentemente perto de um desfoque de verdade.

Escolha a família pelo que vai por cima. Desfoques claros sustentam bem letras escuras e combinam com skincare, papelaria, bem-estar e capas editoriais. Desfoques escuros fazem letras claras brilharem e combinam com vida noturna, música e eventos tarde da noite. Um desfoque neutro como o linho funciona como fundo discreto para fotos de produto, em que a cor nunca deve competir com o objeto. Para mais paletas suaves, veja degradês sonhadores.

Quanto desfoque um degradê desfocado precisa

A maioria dos degradês desfocados falha por não estar desfocada o bastante. Uma forma desfocada em 30 pixels numa tela de 1080 pixels ainda é uma forma com borda suave, que parece uma mancha. O visual pede um desfoque grande o suficiente para não dar para saber onde uma forma termina.

Um degradê desfocado em CSS

Na web você tem dois caminhos. Degradês radiais em camadas que desaparecem no transparente são leves e renderizam na hora. Elementos realmente desfocados parecem mais suaves e podem se mover, mas custam mais para 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 você precisa de um painel fosco sobre um fundo desfocado, e não do fundo em si, isso é backdrop-filter, explicado em backdrop filter no CSS.

Por que degradês desfocados parecem baratos, e como resolver

O banding pega todo mundo, porque um desfoque cria transições longas e suaves por muitos pixels. Um pouco de grão resolve; banding em degradês explica por quê. E se duas das suas cores se encontram no cinza, troque uma por uma vizinha, como descrito em degradês sujos.

Os Marks do Gradiently incluem materiais suaves e difusos com grão embutido, e mantêm calma a área atrás das suas palavras, então um visual desfocado nunca engole o título. Você pode criar com qualquer Mark não reservado de graça no Studio.