Liquid Glass UI

Make Interfaces Flow

Apple's most ambitious visual refresh ever, spanning iOS 26 / macOS Tahoe / iPadOS 26
Experience unprecedented transparency and dynamic layering

View WWDC Docs

Transform Your Designs

Upload any image and transform it with beautiful liquid glass effects in real-time

Upload Image

Drop image here

or click to browse

Quick Presets

Glass Effects

2.0px
80%
25%
120%
110%
16px
0°

Live Preview

Ready for Magic

Upload an image to see the live preview

Core Features

Discover how Liquid Glass redefines the visual language of digital interfaces

🌐

Cross-Platform Unity

iOS, macOS, and watchOS UI languages are unified for the first time, providing seamless cross-device experiences.

✨

Dynamic Refraction & Highlights

UI instantly adapts to device orientation and ambient light, delivering authentic physical texture.

📱

Depth Layering

Visual components stack in 3D Z-index, maintaining clear visual hierarchy and contextual relationships.

⚡

Performance Optimized

GPU-level blur pipeline with automatic fallbacks for older devices ensures smooth user experience.

🔮

Future Hardware Ready

Built as foundation for 2027 "Glasswing" all-glass iPhone, leading the next interaction revolution.

🤖

AI-Powered Enhancement

Intelligent algorithms automatically optimize your designs for the best liquid glass effect, with real-time adaptation to content and context.

Learn more technical details in ourdeveloper documentation

Real-time Glass Effect Experience

Adjust parameters to experience the visual magic of Liquid Glass in real-time

Parameter Controls

💡 Automatically switches to solid theme when "Reduce Transparency" is enabled for accessibility

LG

Liquid Glass Demo

Real-time effect preview

Blur24px
Saturation1.0
Brightness1.0

This is the magic of Liquid Glass ✨

See Liquid Glass in Action

Example Transformations

See how ordinary designs become extraordinary with liquid glass effects

Before
After
Dashboard

Modern Dashboard

Clean dashboard with liquid glass cards and navigation

CardsNavigationAnalytics
Before
After
Mobile

Mobile App Interface

Sleek mobile interface with glass morphism effects

iOSMaterialNavigation
Before
After
E-commerce

E-commerce Cards

Product cards with translucent backgrounds

ProductsCardsShopping
Before
After
Landing

Landing Page Hero

Hero section with gradient glass elements

HeroCTAGradient
Before
After
Profile

Profile Interface

User profile with glass morphism design

UserProfileSocial
Before
After
Forms

Form Components

Interactive forms with glass styling

FormsInputValidation

Ready to Transform Your Designs?

Upload your own design and experience the magic of liquid glass transformation

View All Examples

Developer APIs

Quickly integrate Liquid Glass into your applications

Core APIs

glassBackgroundEffect(in:displayMode:)

Add 3D glass effects to any View

SwiftUI Modifier

.glassMaterial

New ShapeStyle supporting thickness/refraction/shadow adjustments

SwiftUI Style

UIHostingGlassView

UIKit container for quick Liquid Glass integration

UIKit Class

View complete API documentation and examples

Apple Developer Docs

Code Examples

SwiftUI Example
// SwiftUI - Liquid Glass Effects
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Liquid Glass UI")
                .font(.largeTitle)
                .foregroundColor(.primary)
            
            RoundedRectangle(cornerRadius: 16)
                .fill(.ultraThinMaterial)
                .frame(height: 100)
                .glassBackgroundEffect(
                    in: .rect(cornerRadius: 16),
                    displayMode: .adaptive
                )
        }
        .padding()
        .background(.regularMaterial, in: .rect(cornerRadius: 20))
    }
}

Performance & Compatibility

  • • Use static blur in scrolling lists for performance
  • • Limit blur radius ≤ 16px on mobile devices
  • • Auto-detect prefers-reduced-transparency
  • • Font/icon contrast ≥ 4.5:1 (WCAG AA)
View SwiftUI APIRead the HIGGet Resources

Frequently Asked Questions

Everything you want to know about Liquid Glass

Liquid Glass supports full effects on iPhone 15 and newer devices. For older devices (iPhone 12-14), the system automatically enables optimized mode, maintaining visual consistency while ensuring smooth performance. iPhone 11 and earlier devices will use a fallback version.

We use GPU-level optimization pipelines. Real-world testing shows battery drain increases by less than 3%. The system dynamically adjusts effect intensity based on device performance and battery status to ensure optimal performance.

You can disable animations in Settings > Accessibility > Reduce Motion. Additionally, Settings > Accessibility > Reduce Transparency switches to solid color themes for accessibility compliance.

Modern browsers (Safari 14+, Chrome 76+, Firefox 103+) support backdrop-filter properties for near-native effects. Unsupported browsers automatically fall back to semi-transparent solid backgrounds.

We provide complete APIs for SwiftUI, UIKit, and web platforms. SwiftUI uses .glassMaterial modifier, UIKit uses UIHostingGlassView container, and web uses our CSS utility classes for quick implementation.

Liquid Glass is designed for backward compatibility. Existing apps can migrate gradually, and new glass effects won't break existing layouts. We also provide migration guides and best practice documentation.

Have more questions?

Check out our complete documentation or contact our developer support team

View DocumentationContact Support