Hi everyone,
I’m trying to use custom code in Readymag, but I can’t seem to get it working.
I’ve searched online and followed several tutorials on how to implement custom code, specifically to create a blurred background effect on a surface (like a div or shape). However, none of the solutions I tried worked inside Readymag.
What I’m trying to achieve is pretty simple:
– Apply a background blur (like CSS backdrop-filter: blur(...))
– Only on a specific area/element
I’m not sure if I’m missing something about how Readymag handles custom code or if there are limitations I’m not aware of.
Could someone explain how custom code is supposed to be implemented correctly in Readymag? Or let me know if background blur is even possible this way?
Thanks a lot 
i’m not a developer but this works for me
[data-id=“your shape id here, within these quotation marks - you get this by inspect element”] {
position: fixed;
top: 0;
left: 0;
right: 0;
width: auto;
z-index: 2;
background: rgba(0,0,0,0.001);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
your shape has to be transparent for this to work. you can adjust the blur intensity with the px value. add this to the css tab in the custom code widget
Thank you. The problem for me is not the code itself, Ive coded before. It is basically how to put it to work, how the coding works exactly on readymag. ive tried many things but nothing seems to react to the code. I might be missing a simple step.
I’m having the exact same issue. Code is entirely unresponsive. I am working with it on the free version in preview mode and then will upgrade when I’m ready to publish. Do you think it may have to do with that?