Apple's Liquid Glass design language, introduced with iOS 26, brings a fresh aesthetic to iOS apps with translucent, glassy UI elements. Here's how we implemented it in Skyscraper, our Bluesky client for iOS, and how you can adopt the same approach in your SwiftUI apps.

What is Liquid Glass?

Liquid Glass is Apple's evolution of glassmorphism—a design trend featuring translucent surfaces with blur effects that let underlying content show through. In iOS 26, this is applied system-wide to:

  • Tab bars – Translucent with content scrolling underneath
  • Navigation bars – Glass effect with blur
  • Toolbars – Separated buttons with visual spacing
  • Sidebars – Adaptive layouts on iPad

The key insight: you don't implement Liquid Glass manually. You leverage native iOS behaviors and let the system handle the visual effects.

Skyscraper's Tab Bar Implementation

Here's how Skyscraper implements the main tab bar using SwiftUI's native iOS 18+ features:

TabView(selection: $selectedTab) {
    Tab("Timeline", systemImage: "house.fill", value: 0) {
        TimelineView()
    }
    .accessibilityLabel("Timeline")

    Tab("Discover", systemImage: "sparkles", value: 1) {
        DiscoverView()
    }

    Tab("Activity", systemImage: hasUnseenActivity
        ? "tray.badge.fill"
        : "tray.fill", value: 2) {
        NotificationsView()
    }

    Tab("Chat", systemImage: hasUnreadMessages
        ? "message.badge.filled.fill"
        : "message.fill", value: 3) {
        ChatListView()
    }

    Tab("Compose", systemImage: "square.and.pencil",
        value: 99, role: .search) {
        Color.clear
    }
}
.tabViewStyle(.sidebarAdaptable)
.tint(appTheme.accentColor)

Key Elements

  • .tabViewStyle(.sidebarAdaptable) – The iOS 18+ adaptive style that automatically switches between sidebar and tab bar layouts
  • Dynamic SF Symbols – Badge icons change based on notification state
  • .tint() – Global accent color theming

Creating the Glass Effect

The glass/translucent effect comes from allowing content to scroll under the navigation and tab bars. In Skyscraper's timeline view:

TimelineCollectionView(
    viewModel: viewModel,
    navigationState: $navigationState,
    uiState: uiState,
    theme: theme,
    mediaSettings: mediaSettings
)
.ignoresSafeArea(edges: [.top, .bottom])

How It Works

  1. .ignoresSafeArea(edges: [.top, .bottom]) allows the content to extend under the navigation bar and tab bar
  2. Combined with .systemBackground, this creates the frosted glass blur effect
  3. Content scrolls behind the bars while they remain visible
  4. iOS handles the blur intensity and translucency automatically

UIKit Collection View Configuration

For hybrid SwiftUI/UIKit apps like Skyscraper (which uses UICollectionView for performance), configure the collection view for glass effects:

func makeUIView(context: Context) -> UICollectionView {
    let layout = createLayout(coordinator: context.coordinator)
    let collectionView = UICollectionView(
        frame: .zero,
        collectionViewLayout: layout
    )

    // Use system background for automatic light/dark adaptation
    collectionView.backgroundColor = .systemBackground
    collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    // Enable smooth scrolling under bars
    collectionView.contentInsetAdjustmentBehavior = .automatic
    collectionView.isScrollEnabled = true
    collectionView.bounces = true
    collectionView.alwaysBounceVertical = true

    return collectionView
}

Layout Configuration

var listConfig = UICollectionLayoutListConfiguration(
    appearance: .plain
)
listConfig.showsSeparators = false
listConfig.backgroundColor = .systemBackground

Using .systemBackground ensures automatic adaptation to light/dark mode and enables the translucent effect.

iPad-Specific Handling

iOS 18 introduced a floating tab bar on iPad, which can be problematic for some apps. Skyscraper forces the traditional bottom tab bar:

#if os(iOS)
if #available(iOS 18.0, *) {
    if UIDevice.current.userInterfaceIdiom == .pad {
        if let windowScene = UIApplication.shared
            .connectedScenes.first as? UIWindowScene,
           let rootVC = windowScene.windows.first?
            .rootViewController {
            rootVC.traitOverrides.horizontalSizeClass = .compact
        }
    }
}
#endif

This forces .compact size class on iPad, resulting in the traditional bottom tab bar instead of the floating variant.

Toolbar Button Separation

For Liquid Glass toolbar buttons with visual separation (as seen in iOS 26 apps), use UIKit's native spacing:

// Creates separated buttons with glass-morphic appearance
hostingController.navigationItem.rightBarButtonItems = [
    composeButton,
    .fixedSpace(0),  // Visual separation
    devChatButton
]

The .fixedSpace separator creates the visual gap that's characteristic of Liquid Glass toolbars.

Theme System for Accent Colors

Skyscraper uses a global theme system that works with Liquid Glass:

@MainActor
class AppTheme: ObservableObject {
    @Published var accentColor: Color {
        didSet {
            saveColor()
        }
    }

    enum ThemeColor: String, CaseIterable {
        case skyscraperBlue  // RGB: 0.231, 0.525, 0.966
        case orange, blue, purple, pink
        case green, red, teal, indigo, yellow
    }
}

Apply globally with:

.tint(appTheme.accentColor)

Key Principles for Liquid Glass

Based on our Skyscraper implementation, here are the principles for adopting Liquid Glass:

Do

  • Use native system behaviors – Let iOS handle blur and translucency
  • Apply .ignoresSafeArea() – Allow content under bars
  • Use .systemBackground – Automatic light/dark adaptation
  • Use .sidebarAdaptable – Modern adaptive tab bar
  • Test on actual devices – Simulator may not show effects correctly

Don't

  • Don't implement custom blur – Conflicts with system effects
  • Don't use opaque backgrounds – Breaks the glass effect
  • Don't fight the system – Embrace platform conventions

Performance Considerations

Liquid Glass effects are GPU-accelerated by iOS, but consider:

  • UICollectionView vs List – For large lists (like social feeds), UICollectionView offers better scroll performance
  • Avoid excessive transparency layers – Multiple overlapping translucent views can impact performance
  • Test on older devices – iPhone 12 and earlier may show reduced effects

Related Resources

For more on iOS development and Bluesky:

Try Skyscraper

See Liquid Glass in action in our Bluesky client:

Building a Bluesky app? Start with native iOS patterns and let the system shine.

Download Skyscraper to see Liquid Glass in action →