Poor Mans Liquid Glass

liquid_glass_easy.css

/* 
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;
}