Here’s a neat little code snippet for recreating Apple’s Liquid Glass effect using some CSS magic and an SVG filter. Sure, it looks cool, but let’s face it, putting this on your site is like bringing a flamethrower to toast marshmallows, overkill and probably a UX nightmare. Plus, browser support might leave you feeling lonelier than an IE developer in 2025. Proceed at your own risk!
Description:
This CSS sets up the wrapper for the glass effect and can be adjusted to your needs. It also specifies the SVG mask which is applied.
Language: CSS
Where to add: Divi Code Module
/*
1) Base wrapper
- Creates a positioned container that clips overflow.
- All visual effects will be applied within this boundary.
*/
.de-liquidGlass-wrapper {
position: relative;
overflow: hidden;
}
/*
2) Distortion + Blur Layer (Pseudo-element ::before)
- Applies a blurred distortion effect using an SVG filter.
- Positioned to extend well beyond the wrapper to ensure full coverage, even on scroll.
- `isolation: isolate` ensures the blend effects are contained.
- `pointer-events: none` ensures the layer doesn't block clicks.
*/
.de-liquidGlass-wrapper::before {
content: "";
position: absolute;
inset: -50%; /* Expands the element outward in all directions */
pointer-events: none;
isolation: isolate;
-webkit-backdrop-filter: blur(3px); /* Safari support */
backdrop-filter: blur(3px); /* Applies the blur effect */
filter: url(#de-glass-distortion); /* SVG filter ID for distortion effect */
}
/*
3) Tint + Shine Layer (Pseudo-element ::after)
- Adds a semi-transparent white overlay for a frosted/tinted look.
- Inner shadows simulate light reflection and glass highlights.
- Also does not block mouse interaction.
*/
.de-liquidGlass-wrapper::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(255,255,255,0.25); /* Soft white tint */
box-shadow:
inset 2px 2px 1px rgba(255,255,255,0.5), /* Top-left highlight */
inset -1px -1px 1px rgba(255,255,255,0.5); /* Bottom-right highlight */
}
/*
4) Content Layer
- Ensures any content (Divi modules and columns) within the wrapper
is rendered above the visual glass effect.
- This prevents the content from being blurred or distorted.
*/
.de-liquidGlass-wrapper .et_pb_column,
.de-liquidGlass-wrapper .et_pb_column .et_pb_module {
position: relative;
z-index: 1;
}
Description:
This creates the displacement/distortion map that will be used by our CSS to warp the contents of our wrapper container.
Language: HTML
Where to add: Divi Code Module
<svg style="display: none">
<!--
This SVG defines a custom filter for a liquid glass distortion effect.
It should be placed somewhere in your HTML (preferably near the top, such as in the <head> or before closing </body>).
-->
<filter id="de-glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
<!--
1) Turbulence: Generates a noise texture for the distortion
- `type="fractalNoise"` creates a smoother, cloudy noise
- `baseFrequency` controls the size and density of the noise
- `animate` cycles through different seeds to make the distortion look fluid
-->
<feTurbulence
type="fractalNoise"
baseFrequency="0.01 0.01"
numOctaves="1"
seed="5"
result="turbulence">
<animate attributeName="seed" from="1" to="200" dur="8s" repeatCount="indefinite"/>
</feTurbulence>
<!--
2) Color Mapping: Controls how the noise affects the RGB channels
- This stage adjusts the turbulence so it mainly affects the red channel (used for displacement)
- Green and blue channels are suppressed to reduce distortion in those axes
-->
<feComponentTransfer in="turbulence" result="mapped">
<feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5"/>
<feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
<feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5"/>
</feComponentTransfer>
<!--
3) Blur: Softens the turbulence map for smoother distortion
-->
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap"/>
<!--
4) Lighting: Adds a specular light highlight based on the noise shape
- Simulates light reflecting off a bumpy glass surface
-->
<feSpecularLighting
in="softMap"
surfaceScale="5"
specularConstant="1"
specularExponent="100"
lighting-color="white"
result="specLight">
<fePointLight x="-200" y="-200" z="300"/>
</feSpecularLighting>
<!--
5) Composite: Merges the lighting effect with the noise
-->
<feComposite
in="specLight"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="litImage"/>
<!--
6) Displacement: Distorts the original graphic using the noise map
- `scale` controls intensity
- `xChannelSelector="R"` means distortion is driven by the red channel
- `yChannelSelector="G"` uses the (mostly suppressed) green channel
-->
<feDisplacementMap
in="SourceGraphic"
in2="softMap"
scale="150"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>
</svg>
Easy | CSS
Aug 27 2024
Easy | CSSJavascript
Jul 10 2024
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.
Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.
