How to add backdrop-filter to custom CSS

Ask us anything
1

I’m experimenting and learning WeWeb - I want to add a background blur effect on a section where I have changed opacity - so that the background visible through the section is blurred.

I believe the CSS property is “backdrop-filter” (see below):

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

Can someone post a couple “for dummies” screenshots of exactly how I can add this to a page & section?

This is the effect I want to create

2

You can simply add this property to the Custom CSS section in the style panel
image

3

I was wondering how this CSS element worked. It looks like it automatically applies CSS to the element selected and you list CSS properties without desgnating an #id or classs. How do you define a hover affect or access child elements in a div for example with different id’s? When I was typing in
#myID:hover{
cssproperty: value;
}
it kept getting rid of the {}.

4

Select the state on the top of the panel and you can apply custom css for the hover, for now there is no support for standard CSS pseudo selectors, but it’s a big wish for the team

1 Like
5

Thanks for the tip! It might be good to have a little info icon explaining that you don’t need the style markers or any selector, just CSS properties. Took me a while to figure this out and why it kept changing my code on save.

6

I’m having trouble making this work. Assuming I want to blur the background behind a modal, do I do that on the container, where I can add css, rather than the modal section?

I’ve tried doing that with:
backdrop-filter: blur(10px);

and nothing happens…