Apple’s Liquid Glass UI design (+ CSS guide)
#css#glassmorphism#tutorial#ui
Tom Grusz

Tom Grusz @gruszdev

About: ✨ Frontend Architect & Software Engineer based in Prague. Experience at Mastercard and Make. CS Graduate. I delve into frontend development, design, 3D, accessibility, and bunch more. Inspiration🧋🌲

Location:
Prague, Czechia
Joined:
Jun 10, 2025

Apple’s Liquid Glass UI design (+ CSS guide)

Publish Date: Jun 11
0 1

From Apple’s Liquid Glass Announcement to Real-World Web Development: User Testing Insights, Glassmorphism Trends, and Practical Tips for Developers

What Is Apple’s Liquid Glass? Key Features and Design Philosophy

Apple's introduction of Liquid Glass at WWDC 2025 marks a shift in their interface design. This translucent, adaptive design language now unifies iOS 26, iPadOS 26, and macOS Tahoe 26 in aims to create a cohesive experience across Apple's ecosystem. While it might be groundbreaking for Apple's native apps, for us, web developers, it's a recognition of the glassmorphism trend that's been evolving since 2020.

At its core, Liquid Glass combines:

  • Dynamic material properties that adjust opacity/color based on content
  • Real-time rendering creating specular highlights on UI elements
  • Context-aware transformations for navigation controls and widgets

Apple's Liquid Glass design unifies iOS 26, iPadOS 26, and macOS Tahoe 26

What Apple's VP of Human Interface Design, Alan Dye, emphasizes:

"It's not just visual polish - we're redefining how digital surfaces interact with light and user intent"

User Testing Results: How People React to Apple’s Liquid Glass UI

The initial reactions show both excitement, but also concerns. Beta test users report issues with menu legibility, while some struggle navigating due to its "distracting glossy nature".

How to Create Glassmorphic Effects in CSS

You can create a glassmorphic effect in 3 easy steps.

Step 1: Add a <div> HTML element in your document with a class glass-card:

<body>
  <div class="glass-card">
    <h2>Glassmorphism Card</h2>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Step 2: Add a CSS style that applies glassmorphism to your card:

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.35);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  // optional - white centered text
  color: white;
  text-align: center;

  // optional - card whitespace
  width: 300px;
  padding: 40px;
}

// optional body styles for demo
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: You can customize the glass effect by modifying these values:

  • Transparency - modify the last value in background between 0 and 1 to increase/decrease its transparency
  • Backdrop Blur - increase/decrease the pixel px values in backdrop-filter and -webkit-backdrop-filter to change how text and elements behind the glass are blurred
  • Glass Tint - modify the first three numeric values in background to change the color tint of the glass in RGB format

Congrats! Your card should now look like similar to this:

Glassmorphism card result

Now you can play around with more glassmorphic elements and see how they interact.

Accessibility and Performance Tips for Glassmorphic Web Design

While glassmorphism offers a great visual effect, it's important to keep in mind its accessibility and performance challenges. Here are a few tips to ensure a glassmorphic design is beautiful and usable:

1. Prioritize Contrast and Readability

  • Always maintain high contrast between text and glassmorphic backgrounds. Use neutral text colors (white, black, or gray) and test your color combinations with tools like the WebAIM Contrast Checker to meet or exceed WCAG guidelines
  • Consider adding subtle text shadows to enhance legibility, especially over busy or colorful backgrounds

2. Use Glassmorphism Sparingly

  • Limit glassmorphism to non-critical elements if you can’t guarantee readability
  • Overusing blur and transparency can clutter your UI and confuse users

3. Ensure Cross-Browser Compatibility

  • The backdrop-filter property is well-supported in modern browsers (Chrome, Safari, Firefox, Edge), but not in older ones

Thank you for reading!

I’m Tom, a frontend architect & software engineer based in Prague.

🎨 I believe the bridge between designers and developers is crucial. I work to strengthen it, delving into both worlds to create better products. I bring 3D design to the web, blending visual art with code - a skill not many embrace yet.

You can find more about me here: 🔗 grusz.dev
Find my projects on GitHub: ✨ @tomasgrusz

Comments 1 total

Add comment