What Is the Liquid Glass Effect (and Why You Should Be Afraid)
The new visual trend in Apple’s UI is a sort of animated glass panel that refracts the background like a fancy bathroom window. It looks cool. It also hides important buttons, murders contrast, and makes legibility optional. But hey, it’s shiny.
Used sparingly (hover cards, hero sections), it can add a little magic. Used excessively, it turns your UX into a horror movie. Consider this your official warning.
Download the free Divi layout here
Tools You’ll Need
- Divi (of course)
- LiquidGL by NaughtyDuk
- GSAP + ScrollTrigger (for fancy animations)
- HTML2Canvas (mandatory for LiquidGL to work)
- A questionable sense of UI judgment
Setting Up LiquidGL in Divi
1. Add JavaScript via Theme Options
Go to Divi > Theme Options > Integration and paste your LiquidGL setup script in the <head> or <body> section.
You’ll need to enqueue:
- GSAP core
- ScrollTrigger plugin
- HTML2Canvas
- The LiquidGL library itself
Make sure your classes match what you use in Divi. The target selector should match the element you want to apply the distortion to. You also need to take not of the querySelector classes as you will need these when we jump in the Divi Builder, mine are .fixed-glass-container and .glass-target.
If you want to tweak the effect a bit and make peoples heads explode, head over to the LiquidGL demo site and play around with the various settings to find your flavor of torture.
2. Add the Correct CSS for Positioning
Now you need to go jump into the page or post you want the glass effect on and add a swanky code module for the CSS below. Don’t forget, it has to go in between style tags.
Apply fixed-glass-containerglass-target
3. Targeting the Right DOM Elements
LiquidGL takes a screenshot of the DOM and uses it as a texture map. By default, it targets body as the source and distorts whatever you set as the target.
In Divi, you’ll often want to:
- Use the outer section as the snapshot background
- Target a row/module with the glass effect
You’ll need to experiment. Sometimes, targeting a section works. Other times, LiquidGL refuses to behave until you bribe it with a console log.
4. Debugging When It All Breaks
- Check your browser console for LiquidGL logs
- Make sure HTML2Canvas is loaded before LiquidGL runs
- Try refreshing the page (seriously, this helped more than once)
- If LiquidGL refuses to render, try an SVG fallback
Should You Use This in Production?
- Pros: Looks slick. Clients will love it. Makes your site look expensive.
- Cons: Performance hits. Poor browser support. Contrast crimes. Layout gremlins.
Stick to hover states or short hero sections. Avoid full-page usage unless your goal is “confuse and amuse.”
Want Simpler? Try This Instead
If you’d rather not invite chaos into your layout, we’ve got a CSS + SVG version of this tutorial that doesn’t rely on JavaScript or a WebGL context.
It’s easier, lighter (not really), and slightly less unpredictable.
Final Thoughts
Like any good effect, use LiquidGL responsibly. When used right, it adds just enough visual flair to get your client’s attention without melting their users’ retinas. Try it. Break it. Rebuild it. Then show us what you made!
Want to combine this with more interactivity? Try Divi Ajax Filter for live filtering behind your glass section, or Divi Machine to power a fully dynamic layout underneath your frosty UI.
Got questions? Drop them in the comments or tag us with your blurry experiments. We’d love to see how wrong this can go!
![How to Recreate the Apple Liquid Glass UI in Divi with Just CSS & SVG [Easy-mode]](https://diviengine.com/wp-content/uploads/2025/08/Easy-Liquid-Glass.webp)
0 Comments