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

Video Description

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 (https://youtu.be/GH99LlKTttE) 🔗 Useful Links - Text tutorial with all the code 👉 https://diviengine.com/how-to-recreate-the-apple-liquid-glass-ui-in-divi-with-just-css-svg-easy-mode/ - Divi Ajax Filter 👉 https://diviengine.com/product/divi-ajax-filter/ - 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