In 2025, Apple introduced Liquid Glass, a dynamic, cross-platform material in iOS 26 (and iPadOS 26, macOS Tahoe 26, watchOS 26, and tvOS 26) that extends traditional glassmorphism by incorporating real-time lensing, refraction, and adaptive contrast. Liquid Glass represents Apple's most expansive design update, aiming to enhance depth, focus, and delight while maintaining familiarity and accessibility across devices.
This report synthesizes the latest design patterns, visual characteristics, and best practices for glass buttons and cards in iOS 26 UI, followed by a detailed guide for implementing similar glassmorphic elements in React Native using Expo, including recommended libraries, techniques, and code examples.
Traditional glassmorphism relied on static backdrop blur, transparency, and subtle borders to simulate frosted glass, often constrained by performance and accessibility concerns. In contrast, Liquid Glass:
• Leverages real-time rendering for dynamic refraction and specular highlights that respond to device motion and user interaction. • Adapts tint, opacity, and contrast based on underlying content, ensuring legibility even over complex backgrounds. • Unifies across Apple platforms, offering consistent APIs and motion behaviors for designers and developers.
Liquid Glass exhibits several defining attributes:
• Translucency with context-aware tinting: colors shift subtly between light and dark modes and adapt to backgrounds. • Real-time blur and refraction: background content refracts accurately, creating physical depth. • Specular highlights and fluidity: dynamic highlights and subtle surface flexing bring a lifelike quality. • Multi-layered construction: controls, icons, and widgets stack multiple glass layers to provide depth hierarchy.
Maintain sufficient contrast by dynamically adjusting opacity and tint. Test text legibility against various backgrounds and provide fallback solid backgrounds or increased blur for low-vision users.
Use GPU-accelerated blur and refraction APIs. Limit complex glass surfaces to key UI elements and employ simplified or static effects on lower-powered devices or where performance budgets are tight.
Reserve glass elements for interactive controls (buttons, toggles, tabs) and moderate UI surfaces (cards, sheets). Avoid overuse to prevent cognitive overload or style fatigue. Ensure clear separation between layers with subtle borders or shadows.
While full HIG details for Liquid Glass are distributed across Apple's documentation:
• Adopting Liquid Glass: Encourages developers to adopt new APIs in SwiftUI, UIKit, and AppKit to integrate Liquid Glass materials into controls and navigation — offering fluid transitions and context-aware tinting.
• Materials: Defines Liquid Glass as a primary material, detailing its properties: translucency, dynamic tint adaptation, adjustable blur radius, and specular highlights.
• Components: Specifies updated system controls (buttons, sliders, navigation bars) built from Liquid Glass material layers for consistency and harmony with modern hardware design.
Developers can explore the Meet Liquid Glass WWDC25 session and related WWDC guides for code samples, design tokens, and best practices.
To replicate Liquid Glass-style buttons and cards in React Native using Expo, follow these steps:
- Initialize an Expo project:
expo init GlassMorphicApp
cd GlassMorphicApp- Install dependencies:
yarn add expo-blur react-native-linear-gradient- expo-blur provides
BlurViewfor backdrop blur effects. - react-native-linear-gradient helps create subtle tinted backgrounds behind glass elements.
import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { BlurView } from 'expo-blur';
export default function GlassButton({ title, onPress }) {
return (
<TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
<BlurView intensity={50} tint="light" style={styles.blurContainer}>
<Text style={styles.text}>{title}</Text>
</BlurView>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
borderRadius: 12,
overflow: 'hidden',
},
blurContainer: {
paddingVertical: 12,
paddingHorizontal: 24,
backgroundColor: 'rgba(255,255,255,0.2)',
borderRadius: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 8,
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
});This component layers a semi-transparent background color beneath an expo-blur BlurView, with shadows for depth and borderRadius for rounded glass edges.
import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
import { BlurView } from 'expo-blur';
export default function GlassCard({ title, image }) {
return (
<View style={styles.cardContainer}>
<ImageBackground source={{ uri: image }} style={styles.background} blurRadius={1}>
<BlurView intensity={70} tint="dark" style={styles.cardContent}>
<Text style={styles.cardTitle}>{title}</Text>
</BlurView>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
cardContainer: {
width: '100%',
aspectRatio: 16/9,
borderRadius: 16,
overflow: 'hidden',
marginVertical: 12,
},
background: {
flex: 1,
justifyContent: 'center',
},
cardContent: {
margin: 16,
borderRadius: 12,
padding: 16,
backgroundColor: 'rgba(0,0,0,0.3)',
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 6,
},
cardTitle: {
color: '#fff',
fontSize: 20,
fontWeight: '700',
},
});Here, an ImageBackground provides vibrant content, while BlurView applies a dark tint and strong blur. Shadows and rounded corners simulate depth and cohesion with Liquid Glass principles.
• Dynamic Tinting: Use interpolation on scroll or interaction to adjust BlurView's tint and intensity, mimicking Liquid Glass's adaptive contrast.
• Specular Highlights: Overlay semi-transparent gradients (via react-native-linear-gradient) with moving position to simulate changing light reflections.
• Performance: On Android, test fallback behavior and consider conditional rendering or reduced blur intensity to maintain smooth animations.
import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import GlassButton from './GlassButton';
import GlassCard from './GlassCard';
export default function App() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#111' }}>
<ScrollView contentContainerStyle={{ padding: 16 }}>
<GlassButton title="Press Me" onPress={() => alert('Clicked!')} />
<GlassCard
title="Mountain View"
image="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg"
/>
</ScrollView>
</SafeAreaView>
);
}Apple's Liquid Glass in iOS 26 elevates glassmorphism from static blur to a dynamic, context-aware material system that unifies cross-platform UI design. By understanding its visual characteristics, performance considerations, and accessibility best practices, designers can apply Liquid Glass judiciously to controls, cards, and navigation elements.
In React Native with Expo, developers can approximate these effects using expo-blur, careful layering of transparency, shadows, and gradients, and dynamic property adjustments. Through the provided code examples and advanced techniques, you can achieve glassmorphic buttons and cards that embrace the depth, fluidity, and delight characteristic of Apple's latest UI trends.