# Geada

The image or content gets blurrier bit by bit toward the edge, like glass that grows more frosted.

> Geada is a THM Componentes component that blurs whatever sits behind it gradually: it starts sharp and gets blurrier in the direction you choose. It uses layers of CSS backdrop-filter, with no animation, and works well at the bottom of photos with text on top and at the top or bottom of scrolling lists.

- Category: Special effects
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Light: CSS or light JavaScript, no noticeable cost
- Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interaction: None: the effect runs on its own
- URL: https://vibecode.thmtecnologia.com/en/components/geada/

## 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

```text
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 Geada

### Is Geada heavy on phones?

It is usually light: Geada 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 Geada?

Geada's 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 Geada?

Geada's 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.

## Related components

- [Florada](https://vibecode.thmtecnologia.com/en/components/florada/): Headlines and paragraphs that appear one after another, rising slightly out of a blur until they turn sharp.
- [Escotilha](https://vibecode.thmtecnologia.com/en/components/escotilha/): A glass panel that bends whatever passes behind it, with refracting edges that split the colors.
- [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically.
- [Recado](https://vibecode.thmtecnologia.com/en/components/recado/): Notices that pop in one at a time at the top of the list and push the older ones down, like a live feed.
- [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).