Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Blur effect – Glass Morphism

  • Leonardo
    March 26, 2023 at 4:31 am

    Hi there,

    whith GB Pro effects, is there a way to achieve someting like this? https://imgur.com/kPBLIBc
    The image is just an example to give an idea.

    I was playing around with that but the only thing i achieved is this: https://imgur.com/z8HbG7r
    So i added two background images and added on the second container the blur effect targeting background image.

    I think this could be good with a abstract images, so i would have that portion with blur effect. But with a no abstract image the two images should overlap perfectly and this is a bit difficult to do.

    The ideal thing would be to have a single background image and apply the effect to the upper container, but I can’t find solutions with the effects of Gb. I think it should be done with css right?

    Thanks

  • Leo
    March 26, 2023 at 10:25 am

    Hi there,

    Interesting layout – I tried but wasn’t able to replicate 😉

    Can you link me to the site where the screenshot was taken?

    Thanks 🙂

  • Leonardo
    March 27, 2023 at 1:31 am

    Hi Leo,

    do you mean the first one? Just a random image on google to give an idea. Here is a generator: https://ui.glass/generator/

    I played around with css and it seems to work this way:

    Just two containers. The first with a background image. The second one with headline and his own class: https://imgur.com/hdCOCpr

    So i put this code: https://imgur.com/UyjvYwZ

    Here the property https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

    What do you think? It seems to work, but what I wanted to understand is if we can achieve this with GB Pro’s blur effect. Maybe what is missing is that property, “backdrop-filter”, isn’t it?

  • David
    March 27, 2023 at 3:14 am

    Hi there,

    the most you could do with the filter blur in effects is to apply it to the containers background image ( which has to be set as a pseudo element ). But that effect will be stuck to that background.

    But you can’t do what backdrop-filter does.
    Its something we have on our radar for future effects, especially it now has decent browser support.

  • Leonardo
    March 27, 2023 at 4:39 am

    Hi David,

    great! Happy to hear that,

    Thanks

  • David
    March 27, 2023 at 8:21 am

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.