What it looks like
It looks like glass that becomes frosted little by little. Over a photo, for example, the top stays sharp and, moving down, the image blurs more and more toward the edge, in a smooth transition with no hard cut line. That comes from eight stacked layers by default, each with a bit more blur than the one before. The direction can be down, up or to either side. The component has no color of its own: it only blurs what is behind it, so it works in light and dark mode. It does not animate on its own.
You may be looking for this if you asked for something like
- a photo that gets blurry at the bottom so I can put text on it
- a gradual blur at the top of a list as the content scrolls
- that iPhone-style blur that gets stronger toward the edge
- frosted glass that fades in at the bottom of a card
- blur the edge of an image without a hard cut
- a depth effect with blur behind a sticky header
Also known as
- progressive blur
- variable blur
- gradient blur
- gradual blur
- backdrop blur
- blur fade
When to use
- The bottom of photos and cards with white text on top
- The top and bottom of scrolling lists and carousels
- Behind sticky headers, to separate the menu from the content
- Album covers, profiles and showcases with a caption over the image
When to avoid
- Low-end phones, if you raise the number of layers a lot
- When the content behind it has to stay readable
How to ask your AI
I want a layered progressive blur on the lower half of my card photos so the white text stays readable: sharp at the top and blurrier toward the edge, using CSS backdrop-filter, without blocking clicks and light on mobile.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Progressive Blur
Is Progressive Blur heavy on phones?
It is usually light: Progressive Blur is pure CSS and THM Componentes rates it Light. Each layer, however, is a backdrop-filter the browser computes over whatever is behind it, and the default uses eight. On low-end devices fewer layers help; compare LCP and INP before and after.
How do I change the direction and strength of Progressive Blur?
The Progressive Blur direction prop sets where the blur grows: bottom, the default, top, left or right. The blurLayers prop sets the number of layers, and blurIntensity how many pixels of blur each layer adds, 0.25 by default. The demo uses 6 for a much stronger effect.
Do clicks pass through Progressive Blur?
The Progressive Blur blur layers ignore the pointer, but the wrapper around them does not. That is why the demo adds pointer-events-none to the component class, so links and buttons behind it stay clickable. Keep that whenever it sits over interactive content.
