Any widget can be used as a mask for blurring all underlying content. The trick is nearly effortless: just make the widget transparent and use its ID with this CSS code:
[data-id="PASTE WIDGET ID HERE"] {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
Combining different mask shapes and blurring settings can produce truly stunning results. Do you have some to share?
thanks sophia, this is absolutely a great tip! Thanks.
The sad part: Only gets an square shaped result, don’t work with circles!
@About_Studio I think this is due to the CSS property ‘backdrop-filter’, I suggest using just ‘filter’.
[data-id="PASTE WIDEGET ID HERE"] {
filter: blur(3px);
}
Further reading! It appears the reason it will not affect the circle element in ReadyMag is because of a bug when combining backdrop-filter with any properties that crop elements (eg border-radius, mask, clip-path, etc). As the circle element uses a clip-path to create it’s shape, this could be the reason it won’t work on the circle as you rightly pointed out.
This applies the blur to a circle for me:
[data-id="62a8e42b2fbc60001b681930"] {
clip-path: circle(50%);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
}Actually, I got a funny solution also forcing the circle shape: I used the border-radius: propierty and it works fine in this case, but I guess it’s not possible with an irregular shape. Here’s my code!
[data-id="62a3d4fcba46d000385af6ed"] {
border-radius: 800px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
Greetings!
Hello! Maybe someone could help me to understand, how to add blur effect on two different widgets on the same page? I could manage to add only to one so far
