How to blur what's behind an element (Backdrop Filter)
In TeleportHQ, the Backdrop Filter section blurs or tints whatever shows through an element, for example a frosted-glass navigation bar over a photo. Select the element, click + in Backdrop Filter to add a 5px blur, and click Edit filter to change it. The element needs a see-through background for the effect to show.
Before you start
- Backdrop Filter is available on every plan.
- The effect only shows where the element's own background is transparent or semi-transparent. Set that first in Background, for example white at 40%. See How to change an element's background.
Steps
- On the canvas, click the element, for example your navigation bar placed over a hero image.
- In the right panel, open the Visual tab.
- In Background, add a color. In the color picker, choose white and lower its transparency to about 40%.
- Scroll down to Backdrop Filter, after Transition, and click +. A row
blur(5px)is added, and the content behind the element looks blurred. To change the amount, click Edit filter (the pencil) on the row. The Edit Filter panel opens next to the right panel.
- In Value, type a new amount, for example
12. The unit is added for you.
Check that it worked
The part of the page behind the element looks blurred, while the element's own text stays sharp. Check it in Preview too, while you scroll.
Use other effects
In the Edit Filter panel, open Function and pick another effect. Each one starts with a default value:
| Function | Default | What it does behind the element |
|---|---|---|
| Blur | 5px | Blurs |
| Brightness | 100% | Lightens or darkens |
| Contrast | 100% | Changes contrast |
| Grayscale | 50% | Removes color |
| Hue Rotate | 90deg | Shifts colors |
| Invert | 50% | Inverts colors |
| Opacity | 50% | Fades |
| Saturate | 100% | Makes colors stronger or weaker |
| Sepia | 50% | Adds a brown, old-photo tint |
| Drop Shadow | 4px 4px 10px rgba(0,0,0,0.5) | Adds a shadow |
To combine effects, click + again to add another row, for example a blur and a brightness of 80%. Drag rows by their handle to change their order. Click Remove filter (the minus) to delete one.
Troubleshooting
Nothing looks blurred The element's background isn't see-through, or there's nothing behind it. Make the background semi-transparent, and make sure the element sits over other content, for example with Position set to Fixed or Sticky.
I want to blur or grayscale the element itself, like a photo Backdrop Filter only changes what's behind the element. To filter the element itself, open the Advanced tab and add filter with a value such as grayscale(100%) or blur(4px). See How to write CSS directly (Advanced tab).
My filter row disappeared Emptying the Value field removes the filter. Click + to add it again.
I can't edit a filter, and its row is grey The filter comes from a CSS class or a larger screen size, so it can't be edited here. Edit it in the class, or at the larger screen size.
Good to know
- Clicking the Backdrop Filter header doesn't add a filter. Use +.
- To remove all filters for the current screen size, click the colored Backdrop Filter title and choose Reset Values.
- The values in the Edit Filter panel aren't limited, so check the result on the canvas.
- For a see-through header that stays at the top while scrolling, see How to make a header stay on screen when scrolling.