Como ele é
Parece um vidro que vai ficando fosco aos poucos. Sobre uma foto, por exemplo, a parte de cima continua nítida e, descendo, a imagem embaça cada vez mais até a borda, numa passagem suave, sem linha de corte. Isso vem de oito camadas empilhadas por padrão, cada uma com um pouco mais de desfoque que a anterior. A direção pode ser para baixo, para cima ou para os lados. O componente não tem cor própria: ele só desfoca o que está atrás, por isso serve no modo claro e no escuro. Ele não anima por conta própria.
Você pode estar procurando isto se pediu algo assim
- foto que vai ficando embaçada embaixo para colocar texto por cima
- desfoque gradual no topo da lista quando o conteúdo rola
- aquele blur de iPhone que aumenta aos poucos até a borda
- vidro fosco em degradê no rodapé do card
- deixar a borda da imagem desfocada sem um corte seco
- efeito de profundidade com desfoque atrás do menu fixo
Também chamado de
- desfoque progressivo
- progressive blur
- variable blur
- gradient blur
- desfoque gradual
- backdrop blur
- desfoque em degradê
Quando usar
- Base de fotos e cards com texto branco por cima
- Topo e rodapé de listas e carrosséis roláveis
- Atrás de cabeçalhos fixos, para separar o menu do conteúdo
- Capas de álbum, perfis e vitrines com legenda sobre a imagem
Quando evitar
- Celulares mais simples, se você aumentar muito o número de camadas
- Quando o conteúdo atrás precisa continuar legível
Como pedir para a sua IA
Quero um desfoque progressivo em camadas na metade de baixo das fotos dos cards, para o texto branco ficar legível: nítido em cima e cada vez mais embaçado até a borda, com backdrop-filter em CSS, sem bloquear cliques e leve no celular.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Progressive Blur
O Progressive Blur pesa no celular?
Costuma ser leve: o Progressive Blur é só CSS e é classificado como Leve no THM Componentes. Cada camada, porém, é um backdrop-filter que o navegador calcula sobre o que está atrás, e o padrão usa oito. Em aparelhos simples, menos camadas ajudam; compare o LCP e o INP antes e depois.
Como mudar a direção e a força do Progressive Blur?
A prop direction do Progressive Blur define para onde o desfoque aumenta: bottom, o padrão, top, left ou right. A prop blurLayers define o número de camadas, e blurIntensity, quantos pixels de desfoque cada camada soma, com 0,25 por padrão. A demo usa 6, para um efeito bem mais forte.
Os cliques passam pelo Progressive Blur?
As camadas de desfoque do Progressive Blur ignoram o ponteiro, mas o contêiner que as envolve não. Por isso a demo acrescenta pointer-events-none na classe do componente, e assim links e botões atrás dele continuam clicáveis. Vale manter isso sempre que ele ficar sobre conteúdo interativo.
