Blur Effect

Custom code
1

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);
}

New-custom-code-3

Combining different mask shapes and blurring settings can produce truly stunning results. Do you have some to share?

5 Likes
2

thanks sophia, this is absolutely a great tip! Thanks.

2 Likes
3

The sad part: Only gets an square shaped result, don’t work with circles!

5

@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);
}
6

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.

1 Like
7

This applies the blur to a circle for me:

image
image942×743 50.5 KB 

[data-id="62a8e42b2fbc60001b681930"] {
  clip-path: circle(50%);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}
1 Like
8

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!

2 Likes
9

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