Blur Overlay is a backdrop-blur panel that frosts everything behind it — perfect for modals, navbars, hero overlays, cookie banners, or any glass UI.
Just place it above your content on the canvas. It reads the pixels rendered underneath and blurs them live — nothing needs to go inside it.
Fully controllable from the property panel:
• Blur — 0–60px
• Tint — overlay color and opacity
• Saturation & Brightness — dial in the exact glass look
• Radius — rounded corners
• Border + Border color — optional glass edge
Tips
• Keep the overlay above the content in the layer stack.
• Stretch it full-screen for a page-wide blur behind a modal, or size it small for a frosted panel.
• Works in Preview and on the published site; Safari-prefixed for full support.
Blur Overlay is a backdrop-blur panel that frosts everything behind it — perfect for modals, navbars, hero overlays, cookie banners, or any glass UI.
Just place it above your content on the canvas. It reads the pixels rendered underneath and blurs them live — nothing needs to go inside it.
Fully controllable from the property panel:
• Blur — 0–60px
• Tint — overlay color and opacity
• Saturation & Brightness — dial in the exact glass look
• Radius — rounded corners
• Border + Border color — optional glass edge
Tips
• Keep the overlay above the content in the layer stack.
• Stretch it full-screen for a page-wide blur behind a modal, or size it small for a frosted panel.
• Works in Preview and on the published site; Safari-prefixed for full support.
