Create an easy "glass-like" effect with the newly added backdrop filter

Do you love cool effects like we do? Perfect, because we've got a brand new one for you today.‍

The Pro editor now contains a new effect called "backdrop". For those familiar with web development, this is equal to the "backdrop-filter: blur" property. This is a fairly new type of filter that is now supported in all major browsers as of recent.‍

What does it do?
‍A backdrop filter applies an effect to the underlying element. This is different from the regular "blur" effect, which applies the blur directly to the selected element. A blurred backdrop creates a "glass-like" effect to the elements that lie underneath. The amount of blurring depends on your settings, as shown in the example below.

Naturally, the backdrop filter can be used in combination with animations and interactions. For example:

• to reveal an element on hover or by scrolling
• to blur a background when a pop-up is open
• with sticky navigations that are partially transparent

Cool stuff, right?

‍How to do it:

• ‍Create the element(s) you wish to apply the glass-effect to
• Create a shape and make sure it overlaps your element(s)
• Remove the background of your shape (or set it to transparent)
• Go to the 'effects' tab and select 'backdrop'
• Play around with the settings or try applying the filter in combination with animations or interactions
  • Note: try the regular 'blur' effect as well and understand the difference - see how the normal blur doesn't do anything if your element is transparent?