Apple's Liquid Glass Effect in Elementor/WordPress
⭐ Giveaway: Our 100% FREE plugin makes any site 3X faster - https://bit.ly/airlift-performance-plugin. In this video, I’ll show you how to recreate Apple’s signature liquid glass effect on your own website — using just HTML, CSS, and a few smart layout tricks in Elementor. We’ll design a row of floating glass cards that blur and refract a full-screen video background, giving you that premium Apple-style depth and motion. You’ll learn how to set up the layout, apply the liquid glass effect using SVG filters and CSS backdrop blur, and tweak every detail to fit your design. Code & Assets: https://drive.google.com/drive/folders/1R9vpXnwtIug5jXK_UXK3huwpTVnMmnUE?usp=sharing Get Elementor: https://be.elementor.com/visit/?bta=227172&nci=5727 00:00 Intro 00:18 Add a Fullscreen Video Background 01:05 Create Your First Glass Card 02:26 Duplicate Cards for a Row Layout 02:46 Insert SVG Refraction Layer (HTML Widget) 03:02 Apply Custom CSS 03:33 Behind the Scenes: SVG Settings Explained #elementor #WordPress #LiquidGlass #glassmorphism
Download
0 formatsNo download links available.