Blur (desfoque)

Reduzir a nitidez de um elemento pra empurrar ele pro fundo e jogar a atenção pro que importa.

Hard

O que é

Blur é a técnica de tirar nitidez de um elemento pra que ele recue visualmente. Parece uma escolha so estética, mas tem uma função bem clara por trás: como o olho prioriza o que está nítido, tudo que fica desfocado é entendido como fundo, enquanto o que continua limpo vira o foco.

O uso mais comum aparece quando um modal abre e a tela atrás dele fica desfocada. A pessoa entende na hora onde está a ação, sem precisar de nenhum texto explicando, porque a competição visual diminui e a carga de quem lê a tela fica menor.

Mesmo assim, blur tem custo e vale ter isso no radar. Quando é pesado, ele trava a renderização em aparelho mais fraco, e desfoque demais atrás de texto acaba com a leitura. Por isso ele combina bem com contraste forte e nunca deve virar muleta pra esconder um layout bagunçado.

Em uma frase

Vamos aplicar um blur no fundo quando o modal abrir pra atenção ir direto pra ação.

A pergunta que ele responde

Como faço a tela atrás de um modal sumir de vista sem tirar ela do lugar?

Quando usar

Ajuda quando você precisa separar uma camada ativa, como modal, menu ou overlay, do fundo da tela, ou quando quer dar profundidade sem poluir a interface.

Como não usar

O cuidado é não desfocar atrás de um texto que precisa ser lido, porque aí a leitura se perde. Também vale evitar blur pesado sem medir o impacto em aparelho mais lento, já que ele pode travar a tela.

Na prática

Imagine o time abrindo um modal e desfocando a tela atrás dele. O olho vai direto pro conteúdo do modal, sem precisar de seta nem de instrução, porque o resto da tela recuou de propósito.

Não confunda com

Vale separar blur de sombra, porque os dois criam profundidade de jeitos diferentes. A sombra dá profundidade mantendo o elemento nítido, enquanto o blur tira a nitidez justamente pra empurrar aquilo pro plano de fundo. Saber qual usar depende do efeito que você quer: destacar algo que continua em foco, ou mandar algo pra trás.

D

Em inglês

Blur

Pronúncia

blâr

Também chamado de

desfoque, blur de fundo

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre profundidade e camadas em interface