.svg)
Apple's WWDC 2025 dropped "Liquid Glass", a major UI overhaul that's got web designers thinking about some new styles. This isn't just Apple changing how things look - it's actually shifting how to layout digital interfaces. Exciting but there's also some real challenges we need to figure out.
What is Liquid Glass?
Apple's making a big move toward a unified design language that's all about translucency, dynamic light interactions, and interfaces that blend seamlessly together. They're pulling heavily from visionOS and bringing spatial computing ideas into regular 2D experiences, basically creating interfaces that look like they're made of actual glass floating on your screen.
Here's the thing though: this shift is more than just looks. It's changing how user interface layouts too. Apple wants to create interfaces that feel more organic and approachable. That means designers could rethink containers, interactive elements like buttons and menus, and layouts that we've been using for decades.
Direct Impact on Web Design
Safari's new full-screen mobile browsing gets rid of the traditional rectangular viewport completely, extending right to the screen edges. This edge-to-edge approach means designers have to reconsider how content flows around device bezels and rounded corners.
The reality is, this shift requires designing beyond traditional rectangular boundaries. Modern devices like iPhones, Apple Watch, and newer MacBooks all feature rounded corners that influence how content is displayed and interacted with.
Key changes include:
- Rounded corner requirements for all UI elements
- Translucent surfaces that mess with text rendering and color interaction
- Spatial awareness expectations from users who are getting used to visionOS
Traditional rectangular buttons, modals, and sharp-cornered elements are going to look jarring and outdated pretty quickly.
Accessibility Challenges
Liquid Glass introduces some serious accessibility problems. Translucent UI elements can make text way harder to read, even for people without visual impairments. Keyboard navigation gets complicated with all these layered interfaces, and the usual focus indicators just disappear against glass-like backgrounds.
Motion effects become a real problem for some users since Liquid Glass relies heavily on subtle animations and transparency changes. Designers need to provide ways to turn these effects down while still keeping clear visual feedback that actually works on see-through surfaces.
Technical Considerations
Getting Liquid Glass working means developers need to change a lot of things:
- CSS overhauls for safe area insets and dealing with complex screen boundaries
- New contrast methods to make sure text stays readable across different transparency levels
- Performance tweaks to balance the fancy visuals with actually working well
Dark mode gets particularly tricky when text has to stay readable across all these different transparency levels. And all those complex blur effects and layered transparency animations? They can seriously slow things down or affect battery life.
Implementing Liquid Glass in Webflow
For designers working in Webflow, getting these basic glass effects working can be done directly in the Designer interface.
Some properties to get you started. Create a "glass-element" style and apply the following:
- Backdrop-filter properties for blur effects by selecting "Blur" under Backdrop filters and setting it to 20px
- Transparency: Background color should be set to rgba(255, 255, 255, 0.1)
- Border: Set a thin border of 1px (solid) to rgba(255, 255, 255, 0.2)
- To enhance the effect, use different colors on each side: lighter on the top and left, darker on the right and bottom, for a subtle 3D look.
- Border-radius variables to maintain consistent rounded corners: Set this to
1.3rem - Box shadow: Set a subtle dark or light shadow by selecting "Outer shadow" under "Box shadows" and setting it to: X: 0px, Y: 1px, Blur: 12px, Size: 0px, Color: rgba(0, 0, 0, 0.25)
- Text: Be sure to use a text color and weight that creates a high contrast between the background (glass) and the element behing the glass.
You could also define reusable glass properties as variables.
background: rgba(255, 255, 255, 0.1);
border: 1px solid;
border-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
Setting your background image to "Fixed" will create a parallax effect where the background shows through your glass element as users scroll, enhancing the translucent effect.
Industry-Wide Implications
Apple's influence always spreads beyond their own devices. We're already seeing Android and other operating systems experiment with similar translucent interfaces, and major design systems like Material Design are incorporating more fluid elements.
Responsive design is evolving too. Designers used to obsess over breakpoints and screen sizes. Now we're thinking about how content flows, how text reads through glass surfaces, and whether our designs work on everything from tiny watch screens to curved displays.
Apple says Liquid Glass is more than a visual trend - it's the beginning of a new era in digital interface design. The move toward fluid, translucent, and spatially aware experiences means designers need to learn new techniques while keeping accessibility, performance, and usability front and center.
The web never stops changing, and businesses that get ahead of these shifts will create the digital experiences that define what's next. At North Designs, we specialize in Webflow development and focus on what actually matters: building websites that perform, convert, and work for everyone. We're not about to blow up your perfectly good website for some shiny new Apple feature. Sure, Liquid Glass looks cool, but does it actually help your visitors convert better?
When Liquid Glass proves itself beyond the hype, we'll be ready. Until then, we're sticking with what actually moves the needle for your business.
