Glass UI Test code

Creating a Liquid Glass UI with HTML and CSS

This time, I created a Liquid Glass style UI demo using only HTML and CSS. The design was inspired by Apple-like translucent interface elements, where panels appear to float above a soft background with blur, reflection, and subtle distortion.

The demo contains several interface components, including a music player, quick navigation menu, search button, search pill, and a dock-style icon area. The main visual effect is created by stacking multiple layers inside each glass component: a blur layer, a semi-transparent overlay, and a highlight layer.

I also used an SVG filter to add a slight lens-like distortion, which helps the glass panels feel more dynamic and realistic. The result is a soft, glossy interface that reacts nicely to hover and active states.

Features

  • Pure HTML and CSS implementation
  • No JavaScript required for the UI effect
  • Liquid glass effect with CSS blur and transparency
  • SVG filter for lens distortion
  • Responsive design for mobile and desktop
  • Hover animations for buttons and dock icons
  • Music player card, navigation menu, search pill, and dock layout
  • External image assets for the background and icons

Implementation Notes

The glass effect is built by combining several visual layers. The backdrop-filter property creates the frosted blur, while translucent overlays and inset shadows add brightness and depth. The SVG filter adds an additional distortion effect, giving the UI a more liquid-like appearance.

Because this demo uses modern CSS properties, it works best in updated browsers such as Chrome, Edge, and Safari.

Live Demo

Album cover

All Of Me

Nao
Search

Test Code

Below is the test code used for this implementation. The HTML and CSS are separated so they can be copied individually.

HTML Code expand / collapse
CSS Code expand / collapse

Popular posts from this blog

White Goat's Farm Adventure with Gemini Image Gen.

Image
 White Goat's Farm Adventure "Generate a story about a white baby goat going on an adventure in a farm in a 3d cartoon animation style. For each scene, generate an image." The Great Farm Escape of Barnaby Buckleberry Scene 1: Story:  Barnaby Buckleberry was a small, fluffy cloud of white, a baby goat with an adventurous spirit far too big for his little legs. He lived on Farmer McGregor's Sunny Meadow Farm, a place of green pastures, clucking chickens, and the comforting "baa-ing" of his mama. But Barnaby yearned for more than just nibbling clover in the same old field. He dreamt of the mysterious woods bordering the farm, a place the older goats warned him about. Image:  A wide shot of Sunny Meadow Farm in a bright, cheerful 3D cartoon style. Rolling green hills, a red barn, a few scattered sheep and cows. In the foreground, a small, bright white baby goat with large, curious blue eyes (Barnaby) is looking intently towards a dark green line of tre...
Read more

Meta's VideoJam: The Future of AI Video Generation

Image
# Meta's VideoJam: The Future of AI Video Generation Meta has introduced VideoJam, an innovative AI video generator that promises to revolutionize the field of video creation. This state-of-the-art model reportedly outperforms its counterparts, including OpenAI's Sora, Kling 1.5, and Runway Gen-3. With enhanced temporal coherence and advanced functionalities, VideoJam marks a significant advancement in AI-driven content generation. Revolutionary Features of Meta's VideoJam Meta's VideoJam brings forth a plethora of groundbreaking features that set it apart from existing AI video generators. One of its most acclaimed attributes is its state-of-the-art temporal coherence. Temporal coherence is the ability of a video generator to maintain a consistent flow over various frames, allowing for seamless and realistic transitions. For instance, in traditional AI video models, abrupt changes or inconsistencies can shatter the viewing experience. With VideoJam, users can ex...
Read more

Grok 3 Release Date

Image
# Elon Musk Announces Grok 3 Release Date and Details Elon Musk has officially revealed the release date for Grok 3, the newest iteration of xAI’s chatbot. Touted as the “smartest AI” to date, Grok 3 promises to enhance user experience with its advanced capabilities. Details surrounding its features and functionalities have sparked significant interest across the tech community. Grok 3 Beta in use Understanding Elon Musk's Vision for Grok 3 Elon Musk has been a pivotal figure in the world of technology and innovation, constantly pushing the boundaries of what is possible. With the introduction of Grok 3, Musk's vision for artificial intelligence is clearer than ever. He believes that AI should be accessible and beneficial to everyone. The evolution of Grok 1 and Grok 2 laid the groundwork for Grok 3, integrating lessons learned and user feedback into its development. Grok 3 is expected to incorporate an even more sophisticated language model, which will enhance its abil...
Read more