Altonet Fluid Glassmorphism

Description

A complete glassmorphism engine for WordPress: refraction, reflections, dispersion, grain, scroll-driven light – all pure CSS.

Altonet Fluid Glassmorphism turns any element of your site into a realistic pane of frosted glass, configured from a single settings page with a live preview. Everything is pure CSS at render time, so the effect looks the same in every modern browser – no WebGL, no canvas, no heavy JavaScript.

The glass engine

• Frosted body via backdrop-filter (blur, saturation, brightness, contrast), semi-transparent tint, shadow and radius.
• Simulated refractive border: a full-perimeter glass ring with its OWN blur, brightness, contrast and saturation, whose inner and outer corners follow the radius exactly (no corner gap). After the technique popularised by Josh W. Comeau.
• Light & realism cues, driven by a single light angle so the panel reads as one glass slab under one light source:
  • a specular reflection streak (sheen) across the body, with adjustable position, width and echo – and an optional scroll animation that slides the reflection as the panel moves through the viewport, like a fixed light reflecting on moving glass;
  • rim bevel lighting – the border is lit on the side facing the light and shaded opposite, hugging the corner radius exactly, faking the way light bends through the curved edge of glass;
  • a chromatic dispersion fringe – soft warm/cool edges of adjustable width, faking the splitting of light at the rim.
• Inner top-edge highlight and configurable inner/outer rim glow.
• Backdrop extension: the blurred body can grow past any edge to also sample content NEAR the panel, not only behind it – great over moving or scrolling backgrounds.
• Lightweight grain/granularity layer (a static SVG noise texture, generated once).
• Three presets: Light, Tinted (stabilized readability) and Dark.

How you apply it

• Add the fluidglass utility class to any block (“Additional CSS class(es)” field) or page-builder element. Variants: fluidglass--tinted, fluidglass--dark.
• Or target theme-rendered elements (archive cards, headers, widgets…) with custom CSS selectors: matching elements receive the full glass engine automatically, including content inserted later by AJAX pagination or infinite scroll.

Performance & accessibility

• Conditional loading: assets are only enqueued when the effect is actually used.
• Optional performance guard drops the heavier second backdrop-filter on mobile and low-end devices.
• Respects prefers-reduced-transparency and prefers-contrast, with a clean opaque fallback when backdrop-filter is unsupported.

Tip: glass looks its best over a moving, colourful backdrop – Altonet Fluid Glassmorphism pairs beautifully with the Altonet Animated BG plugin.

This plugin renders a frosted glass UI effect and is not affiliated with or endorsed by any hardware or OS vendor.

Credits

The frosted-glass and glass-border techniques are an original CSS implementation, inspired by public write-ups from Josh W. Comeau, Artur Bien and Jamie Gray. No third-party code is bundled.