What is the Liquid Glass Effect?

Picture a blurry, wavy, slightly distorted piece of UI that pretends to be glass. Now imagine using it on top of a busy video background with text floating on it. Yep, that’s Liquid Glass. Apple made it trendy, and now we all have to live with it.

• It’s visually slick – especially in motion, with distortion flowing as the user scrolls.
• It’s controversial – because you know, UX matters. Sometimes. Maybe.
• It’s situational – great for splashy portfolios or landing pages, not your privacy policy.

Tools You’ll Need

• Divi – builder of dreams and nightmares.
• Code Module access – two of them to be exact.
• CSS and SVG filters – for that sweet poor-man’s distortion.
• Optional: WebGL shaders if you’re feeling brave. (Covered in a future tutorial.)

Step-by-Step Guide

Step 1: Set Up a Sticky Section

We’re applying this effect to a floating menu, but you can use it on any section or row. In your Divi Builder:

• Select your Row or Section.
• Under Advanced > Position, set it to Fixed and choose Bottom Center.
• Give it a high Z-index (like 9999) so it doesn’t get buried behind your content.

Step 2: Add Your CSS Module

Add a Code Module to your layout and paste the following CSS inside <style> tags (if not using Theme Options):

This assumes you’re going to apply a .de-liquid-glass-wrapper class to your row or module. That’s next.

Step 3: Apply the SVG Filter

Next, add a second Code Module (anywhere on the page is fine) and paste the following SVG:

This creates a warpy distortion effect that mimics the wobbly Apple look. You can edit baseFrequency and scale to go full psychedelic if you want.

Step 4: Tweak Frequencies and Blur Settings

Don’t like how it looks? Change the values in the SVG filter or blur intensity in the CSS. Lower baseFrequency = smoother distortion. Higher scale = more chaos.

Common Mistakes to Avoid

• Over-blurring: Too much blur and your content will look like a failed AI painting.
• Wrong z-index: If it’s not showing, your element is likely hiding behind everything.
• No wrapper: Don’t forget to add the CSS class to the wrapper element.

Want a fancier version? WebGL Version (HERE)

Want that buttery-smooth, retina-melting effect? The WebGL version using shaders is coming soon. It’s cleaner, more performant, and more Apple-y if that’s what you’re into. Follow us on YouTube to catch it when it drops.

Final Thoughts

You’ve now got a lightweight, CSS-only Liquid Glass effect running in Divi. It’s not the real Apple effect, but it’s close enough to impress your client and confuse your visitors. We’ll call that a win.

Want the fancier version or more Divi tricks? Subscribe and stay tuned for part two of this series.

P.S. If you want to turn your Divi site into a powerhouse, check out the Divi Engine All-Access Pass for every plugin we make, no SVG hacks required.