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

10

Yo! I can copy all other objects idā€™s and paste them i a rowā€¦ Check this photo! And in this case your custom code will work for the whole site on each pageā€¦ (experiment and you will understand)

Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2024-09-25 Š² 23.50.39
Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2024-09-25 Š² 23.50.392852Ɨ506 83 KB

11

I DID IT!!!
I spent the last 2h 30min vibe coding for this feature to work, Iā€™m so excited and thrilled to say I did it. Sharing the code so that you can save time.

[data-id="PASTE DATA ID HERE"] {
  /* 40% opaque black so youā€™ll see the blurred ā€œHackingā€ underneath */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

I have this feeling of achievement for doing this.