Liquid Glass in Divi | CSS + SVG Tutorial (No Plugins)

Want to give your Divi site that fancy Apple-style Liquid Glass UI? In this tutorial, Robey shows you how to create a sleek distorted glass effect without any fancy JavaScript or external libraries.

We’ll be working with Divi, adding some CSS and an SVG filter to build what Robey affectionately calls the “poor man's version” of Apple’s Liquid Glass. It's not perfect, but your clients will ask for it, so here’s how to do it quickly and cleanly in Divi.

🚀 What You’ll Learn
Learn how to add Apple’s Liquid Glass effect to your Divi UI using only CSS and SVG filters, no JavaScript, no heavy lifting. Robey shows you a quick and effective method to recreate this trending UI effect in WordPress (even if it’s not the best UX idea).

🛠️ What We Cover
Why Liquid Glass is a bad idea (but why clients ask for it anyway)
How to apply the “poor man’s” glass distortion effect in Divi
The CSS and SVG combo that gets the job done
How to make it work with sticky menus and hover effects
A teaser of the advanced WebGL version (   • How to Add the Apple Liquid Glass Effect t...  )

🔗 Useful Links
Text tutorial with all the code 👉 https://diviengine.com/how-to-recreat...
Divi Ajax Filter 👉 https://diviengine.com/product/divi-a...
Divi Engine Plugins 👉 https://diviengine.com/plugins
Different Liquid Glass methods 👉 https://ruri.design/blog/liquid-glass

📌 Timestamps
00:00 Intro & Preview of the Effect
00:55 Why This Is a Terrible Idea (But We’re Doing It)
01:16 Live Demo on Divi Site
02:00 Inspiration & Source Article
02:24 CSS Breakdown & Explanation
03:20 Setting Up Sticky Menu with Divi
03:50 Adding the Glass Wrapper
04:10 Copy-Paste Code Setup
05:00 Final SVG Filter Module
05:43 Frontend Preview of Effect
06:40 SVG Filter Deep Dive
07:34 WebGL Version Sneak Peek
08:00 Wrap-Up & Subscribe

👍 Like this video? Subscribe and hit the bell!
Want more fun hacks, questionable UI decisions, and useful Divi tutorials? Tap that bell and hang around.
#DiviEngine #DiviTutorial #LiquidGlassEffect