There’s something quietly powerful about a well-crafted interface. When done right, it doesn’t demand attention—it simply supports the content, adds dimensionality, and creates a sense of clarity and calm.
Why Liquid Glass?
With iOS 26, Apple took another bold step in this direction by evolving their UI into something more fluid, immersive, and context-aware. They call it Liquid Glass – and it’s a fitting name.
This visual language is more than just decoration. Interfaces like this help separate layers of content, guide attention subtly, and build a sense of spatial depth that feels intuitive. It also hints at the direction user interfaces may be heading in the near future – particularly as we design for augmented reality and spatial computing, where UI needs to coexist with the physical world. Apple has introduced this user interface to all its devices. Would users benefit from web interfaces that adhere to this new design language? Apple gives these components for app developers, so probably users on websites could benefit from this consistency.
That’s what inspired my project.
I wanted to explore how the Liquid Glass could work on the web – not just as an imitation of iOS 26’s visuals, but as an accessible, performant version that actually benefits users. The goal was to make something delightful, but also practical: a transparent layer that enhances usability instead of just sitting on top of it.
In this article, I’ll walk through how I interpreted Apple’s design language and how I translated it into modern, accessible web components for my own portfolio site. I’ll also share some useful learnings: a few things that didn’t go as planned – and how I tackled those challenges.
Designing Liquid Glass for the web
A Gradual Shift, a Bold Leap
Apple didn’t land on liquid glass overnight. Starting from previous iOS/iPadOS/MacOS versions, we began to see subtle shifts -more gradients, deeper shadows, and softer layering.
But it’s iOS 26 where everything clicked into place: full-scene glass effects, deeply layered transparency, and materials that respond to light and movement in surprisingly realistic ways.
The jump to liquid glass wasn’t just aesthetic – it was interaction-aware. Apple’s new system-level materials adapt to focus, motion, and accessibility settings, creating an interface that feels alive but never in the way.
This evolution laid the groundwork for my own reinterpretation: how can we bring a similar experience to the browser, without losing fidelity, performance, or accessibility?
Not just Aero Glass 2.0
It’s easy to look at Apple’s liquid glass UI and think of it as a rehash of Microsoft’s Aero Glass from the Windows Vista/7 era – or even the broader Frutiger Aero design trend of the 2000s. Undoubtedly the first was Apple’s own Aqua UI during the introduction of MacOS X in 2000. And to be fair, those were clear predecessors. They introduced transparency, gloss, and glass-like visuals into mainstream UI design long before Apple’s latest take.
But liquid glass isn’t just a nostalgic return – it’s a reimagining with more focus, depth, and restraint.
Where Aero often placed style ahead of clarity, Apple’s version puts content first. The transparency is more controlled. The blur is used not just as an effect, but as a framing device that sets off important information. Instead of overwhelming with visual effects, liquid glass creates space, depth, and softness – emphasizing legibility and flow over decoration.
It’s also far more sophisticated technically: adaptive to accessibility settings, better optimized for performance, and applied with consistency across multiple UI layers. So while it may echo some of Aero’s visual DNA, it raises the bar for what translucent UI can – and should – do.
Translating to UI Design
From material to mockup
In my design process, I tried to echo the same physical qualities of real glass: diffusion, light scattering, layering. I used large translucent surfaces, soft shadows, and light-to-dark transitions to simulate light passing through depth. This required going beyond just blur – I used overlays, inner glows, and transparent gradients to mimic the subtleties of curved glass.
But there was a key difference between what can be done and what should be: in the browser, these visual elements had to remain performant and flexible. I needed the design to look beautiful on all devices, across different themes, backgrounds elements and scroll contexts. So I focused on characteristics that look great in all contexts, and visual behaviours that would hold up in web-browsers, not just in Figma.
In my early design exploration, I considered simulating reflections and light refractions – key elements of how real glass behaves. These can bring a heightened sense of realism, depth, and immersion to UI surfaces. However, I ultimately chose to leave them out of this design & implementation.
Why? As of mid-2025, modern web browsers still lack efficient support for these effects in a performant and consistent way. While CSS and WebGL can mimic some aspects, the cost to rendering speed and browser responsiveness – especially on mobile devices – would have been too high.
If browser vendors begin supporting hardware-accelerated glass-like shaders or richer GPU-optimized visual effects, this is definitely an area I’d revisit. But for now, I chose a middle ground: clean gradients, subtle layering, and soft inner glows that deliver the spirit of liquid glass without overloading the browser.
Designing meets coding
When CSS fights back
Once I moved from mockups to implementation, the real challenge began. Some things that looked perfect in Figma fell apart in the browser.
I used Figma Dev mode to translate components to CSS code. Although it turned out to be useful for speed and consistency, there were obvious visual differences between Figma and the browser – meaning that there is still way to go from automation between Figma design and code, but that’s for another story.
Code generated by Figma Dev mode:
border-top: 1px solid rgba(255, 255, 255, 0.60);
border-bottom: 1px solid rgba(255, 255, 255, 0.60);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), rgba(21, 74, 40, 0.60);
background-blend-mode: overlay, normal;
box-shadow: 0px 4px 10px 0px rgba(255, 255, 255, 0.10), 0px 0px 10px 0px #154A28 inset;
backdrop-filter: blur(2px);Code I manually tweaked and ended up using (with changes highlighted in bold):
border-top: 1px solid rgba(255, 255, 255, 0.60);
border-bottom: 1px solid rgba(222, 239, 213, 0.60);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.0) 100%), rgba(208, 234, 196, 0.60);
background-blend-mode: overlay, normal;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 10px 0px #D0EAC4 inset;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); /* Safari support */For example:
- linear-gradient layering didn’t behave the same way in CSS as it did in design tools.
- background-blend-mode created unexpected contrast issues on certain color backgrounds.
- backdrop-filter – there was just a simple and annoying Figma bug (?) that changed the blur strength to half the amount in the css code. Not a biggie, but an annoying one needed manual fixing.
In the end, I had to find a careful balance between aesthetic fidelity and technical feasibility. The trick was knowing where to simplify—often, reducing complexity gave me a better result. Sometimes, a fake glow was more effective than simulation of the true light reflection.
Making it accessible
The problem with glass: Contrast and Legibility
Glass effects look beautiful – but they’re often hard to read. This is the core tension with translucent UI: the more you show through, the less readable your content becomes. Light text over a blurred background can quickly fall below contrast standards, especially if the background changes or scrolls.
This isn’t just a visual nitpick – it’s an accessibility blocker. People with vision impairments may struggle to read your interface. So, designing glass UI without accessibility in mind isn’t just an oversight – it risks excluding users.
Apple’s approach
Adapting visuals based on settings
One thing Apple did really well in iOS 26 was building adaptive layers. Depending on system-wide accessibility settings, liquid glass effects shift between levels of clarity and contrast.
These settings respect user preferences while maintaining a sense of visual identity. However, these are buried in iOS settings that not many users will find, and may ultimately be stuck with the standard setting.
My approach
Balancing character and compliance
I approached this challenge in a different way for the web – by carefully tuning the gradients, overlay colors, and transparency levels so that they meet accessibility contrast standards. In all cases, the UI passes WCAG AAA contrast guidelines—without having to completely turn off the glass effect. The effect is not as convincing as Apple’s, but delivers more on accessibility and performance.
This meant rethinking what level of transparency I used for blur and color. Instead of relying on fully transparent overlays, I used nuanced linear gradients that could preserve contrast even over busy backgrounds. I also added faint borders and soft glows to edges.
I’ve learned that not all components are fully transparent. After digging more into interface guidelines, I’ve found that Apple also uses less transparent components and buttons in this design language. I choose to align mine to those – plus the slight visual changes around foundational pieces in my website’s look and feel: spacing, typography and colours.
Close to native experience
Perhaps the most rewarding outcome was how the fixed glass layers – especially in the top navigation – felt convincing on scroll. They remained sharp, readable, and visually consistent with the rest of the interface.
Even more interesting: when viewed on ipadOS 26, my web components looked eerily similar to native Apple UI. The navigation bar, buttons, and overlays blended with the OS environment, almost as if the website was an extension of the operating system.
That was one of the main goals of this experiment and reinforced my initial hypothesis: this interface might assist users more when the new visual language will be mainstream on every Apple device (and believe me, Samsung, Google and the lot of other are taking notes). Familiar visuals build immediate trust and comfort—something that’s often hard to achieve on the web.
However, I don’t have quantitative data to support this hypothesis yet. Again, another area to validate when Liquid Glass goes mainstream. Until that, this experiment will only be an early Guinea pig.
Designing for everyone is ongoing work
While the liquid glass layout and interactions I built aim to meet high accessibility standards – including strong contrast ratios and consistent legibility – I’m aware that true inclusivity goes beyond visual contrast. There’s still meaningful work ahead to ensure the experience supports neurodivergent users, who may respond differently to transparency, motion, or layered UI depth.
This presents a valuable challenge: how can we retain visual delight while offering the right level of cognitive comfort, control, and predictability? From reduced motion modes to customizable interface densities, this area remains a space for further optimization – and one I’m excited to continue exploring.
Why Liquid Glass might matter more
Liquid glass might look like an eye candy, but when it is done universally on all devices, it will offer a familiar pattern for the user. When switching from mobiles and tablets to new AR devices, there will be no learning curve needed. What new AR devices am I talking about, you might ask?
Preparing for future interfaces
We are aware that augmented reality (AR) devices hold a significant position in Apple’s roadmap. While the Vision Pro may not be the device that will replace our iPhones, it serves as a glimpse into the future of AR. Meta is already heavily exploring this space with its AI glasses. Could we be on the brink of an affordable and user-friendly AR device? Nevertheless, Apple has begun preparing the masses for this exciting new technology.
Looking ahead, this kind of UI design could play a key role in augmented reality and mixed-reality interfaces. If we imagine wearing AR glasses in a public space, information will need to appear in ways that are:
- Contextual (layered on top of the real world),
- Subtle (not blocking our view), and
- Safe (highly legible and unobtrusive).
Liquid glass – transparent but structured, legible but restrained – feels like a stepping stone to that future. It feels logical and bold to introduce or refine this concept with the masses on such a popular device like the iPhone as a first step. It introduces a vocabulary where information can float, hover, and blend without becoming chaotic. Done well, it builds a bridge between our physical and digital environments.
Wrapping up
This project started as a visual experiment – an attempt to bring a piece of iOS 26’s beautiful UI into my personal website. But it ended up being a deeper exploration of accessibility, performance, and future-facing design.
I learned a lot along the way: about how browsers interpret design, where performance matters most, and how thoughtful details (like contrast and depth) can make all the difference.
Most of all, I was reminded that good UI isn’t about copying trends – it’s about extending ideas with purpose, clarity, and care.
If you’ve been curious about experimenting with translucent UI patterns or rethinking how your site feels, I’d encourage you to give it a try. Just remember: the best design is the one that not only looks great – but truly works for everyone.