Apple’s recent iOS updates have brought more attention to a trend that designers have been playing with for a while: the Glassmorphism. It’s that dreamy, semi-transparent UI that looks like a sheet of blurred, glossy glass—but modern, fluid, and incredibly sleek.
This style—commonly called Liquid Glass—was once limited to those comfortable with SVG filters and advanced CSS. But now, Elementor users can achieve that same premium look in just a few clicks, thanks to a plugin update that makes the process completely no-code.
Let’s break down how.
Table of Contents
The Rise of Glassmorphism in Apple’s Design Language
Apple isn’t new to this style. We’ve seen subtle blur and transparency in macOS and iOS for years. But with iOS 26 and beyond, the aesthetic has become more dynamic—especially with the new Lock Screen visual layers, widget backgrounds, and the enhanced standby mode UI. These look almost like rippling water over frosted glass—what many now refer to as liquid glass.
Naturally, creatives want to replicate this on the web. And with modern design tools evolving, it’s now easier than ever.
Meet the Liquid Glass Addon in Premium Addons for Elementor
If you use Elementor, you’ve probably come across the Premium Addons for Elementor plugin. It recently introduced a Liquid Glass Addon that replicates this iOS-inspired design beautifully.
What makes it special?
-
You don’t need to write a line of code.
-
Comes with built-in presets that mimic the real glassmorphism effect—blurs, reflections, depth, all built in.
-
Fully responsive and customizable within the Elementor interface.
-
Works beautifully with backgrounds, callouts, hero sections, or even image overlays.
An Alternative for Developers and Designers
Now, if you’re someone who prefers total control and doesn’t mind working with code, I’ve previously created a custom CSS and SVG approach that gives you full creative freedom over the liquid glass effect—no plugins required.
It uses SVG filters (feTurbulence, feDisplacementMap), combined with layered shadows and blur, to recreate that flowing distortion Apple’s UI is known for.
👉 If that sounds more your speed, you can read the full tutorial here:
How to Create Apple’s Stunning Liquid Glass Effect for Web Design
But for designers, marketers, and builders who just want something that works fast and visually, the Premium Addons is an excellent new tool in the arsenal.
🚦Quick Comparison: No-Code vs Custom‑Code
| Feature | No-Code (Premium Add‑ons) | Custom CSS+SVG |
|---|---|---|
| Setup Speed | 👇 seconds | 👆 minutes+ |
| Browsing support | No support of Frirefox and Safari | No support of Frirefox and Safari |
| Visual presets | ✅ six+ ready-made | CSS based presets |
| Elementor live adjustments | ✅ yes | CSS and SVG adjustments |
| Full creative control | Limited | 100% control |
| Performance impact | Low — modular | Minimal |
A Note on Browser Support
Currently, the Liquid Glass addon renders perfectly on modern Chromium-based browsers—Chrome, Brave, Opera, Microsoft Edge. The effect uses advanced background rendering techniques which aren’t yet supported by Firefox or Safari, so users on those browsers will simply see the background without the distortion effect.
This is a limitation in the browsers themselves, not the plugin. Still, it’s something to keep in mind if you expect a wide range of visitors.
Final Thoughts
It’s exciting to see how far no-code design tools have come. Effects that once required SVG wizardry are now just a click away. The Liquid Glass effect from Premium Addons for Elementor is sleek, fast to implement, and makes your site feel like a modern native app.
Whether you’re a code-free builder or a design dev looking for quick solutions, it’s worth trying out. And if you ever need deeper control, you’ve always got the DIY CSS route to fall back on.
