Background blur not rendering correctly
Why background blur disappears after publishing and how to restore it.
When this issue occurs, you will notice the following:
In preview, the blurred background renders as expected.
On the published site, the blur either does not render at all or appears inconsistently.
If the problem only shows up after publishing, it is most likely a browser rendering limitation rather than an issue with your Framer project.
What causes this
Chromium-based browsers (such as Chrome and Edge) can fail to render background blur when the same element is also animating its opacity. During an opacity transition, these browsers may drop the blur layer as an optimization step, allowing the animation to continue but removing the blur effect entirely.
This behavior only occurs after publishing because preview uses a different rendering environment that does not trigger this limitation.
How to confirm you’re affected
Follow these steps to verify whether the issue is caused by the Chromium blur–opacity limitation:
Open your page in preview and ensure the blurred element looks correct.
Publish your site and open it in Chrome or Edge.
Trigger any interaction or scroll event that starts the animation.
If the animation plays but the blur disappears or pops in late, you’re encountering this Chromium limitation.
How to fix it
To restore consistent blur rendering:
Remove any opacity animations from the element that has the blur effect. Avoid combining opacity transitions with blur on the same element.
If animation is required, use scale or translate animations instead. These transform-based animations do not conflict with blur in Chromium.
After applying the change, publish again and reload the page to verify that the blur now renders correctly. With the opacity animation removed (or replaced), Chromium browsers will render the blur reliably across all states. The blur should now behave the same in both preview and your published site.
If you still experience issues or need help adjusting your setup, feel free to reach out to us through our contact page for further help.
Updated