---
title: "How to Design a Liquid Glass App for iOS 26 and iOS 27 | Superapp"
description: "Design a Liquid Glass app the way Apple intends: glass for navigation not content, regular vs clear, SwiftUI APIs, Icon Composer and accessibility checks."
image: https://superapp.dev/superapp-logo.png
canonical_url: https://superapp.dev/blog/how-to-design-a-liquid-glass-app-for-ios
md_url: https://superapp.dev/blog/how-to-design-a-liquid-glass-app-for-ios.md
---
## Liquid Glass Design: The Short Answer

Designing a Liquid Glass app comes down to one rule from Apple: put glass on the navigation layer, never on your content. Tab bars, toolbars, sidebars, sheets and floating buttons get the material; lists, cards, photos and backgrounds do not. If you build with Apple's standard components, most of the work happens automatically.

> **Quick answer: how do you design a Liquid Glass app?** Use Apple's standard navigation components (tab bars, toolbars, sheets), which adopt Liquid Glass automatically on iOS 26 and later, and keep glass off the content layer, as the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/materials) instruct. Use the regular variant by default and the clear variant only over photos or video, with a 35% dark dimming layer if the media is bright. Add custom glass sparingly with SwiftUI's `glassEffect()` inside a `GlassEffectContainer`, build layered icons in Icon Composer, and test with Reduce Transparency, Increase Contrast and the iOS 27 transparency slider. The honest caveat: Liquid Glass hurts legibility when it is overused, which is the main criticism usability researchers have made of iOS 26.

## What is Liquid Glass?

Liquid Glass is the translucent material at the center of Apple's 2025 redesign. Apple announced it on June 9, 2025, describing it as a material that "reflects and refracts its surroundings," and rolled it out across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 ([Apple Newsroom](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/)). Alan Dye, Apple's vice president of Human Interface Design at the time, called it "our broadest software design update ever" in the same announcement.

The defining trait is lensing. In the WWDC25 session Meet Liquid Glass, Apple calls it "a new digital meta-material that dynamically bends and shapes light," and says "each layer continuously adapts based on what's behind it" ([WWDC25 session 219](https://developer.apple.com/videos/play/wwdc2025/219/)). Older blur materials had a fixed light or dark look; Liquid Glass changes with the content scrolling underneath.

It is still the design language in iOS 27. At WWDC 2026 Apple refined it rather than replacing it: better diffusion of busy content behind glass, darker edges with brighter highlights for separation, and a system transparency slider for users ([MacRumors](https://www.macrumors.com/2026/06/10/how-liquid-glass-is-changing-in-ios-27/)).

## Where should Liquid Glass go in your app?

Liquid Glass belongs on the controls and navigation that float above your content, and nowhere else. Apple's guidelines say the material "floats above the content layer, establishing a clear visual hierarchy between functional elements and content," and state plainly: "Don't use Liquid Glass in the content layer" ([HIG: Materials](https://developer.apple.com/design/human-interface-guidelines/materials)).

| Interface element | Use Liquid Glass? | Why |
| --- | --- | --- |
| Tab bar | Yes, automatic | Navigation layer; standard tab bars adopt it |
| Toolbar and navigation bar | Yes, automatic | Navigation layer; remove custom backgrounds |
| Sidebar (iPad, Mac) | Yes, automatic | Floats over content; use background extension under it |
| Sheets and popovers | Yes, automatic | Modal views adopt the material; half sheets inset from the edge |
| Floating action button | Yes, sparingly | A key control over content; use a glass button style |
| Sliders and toggles | Only while touched | The knob turns to glass during interaction |
| Lists, cards, cells | No | Content layer; use standard materials or solid fills |
| App background | No | Content layer; glass here muddies the hierarchy |
| Photos and video | No (glass goes over them) | Media is content; controls over media use clear glass |

The reason is legibility and focus. Apple says Liquid Glass "seeks to bring attention to the underlying content," and that overusing it in custom controls "can provide a subpar user experience by distracting from that content." Its own advice is to "limit these effects to the most important functional elements in your app" (same source).

The good news for existing apps: Apple says "adopting Liquid Glass doesn't mean reinventing your app from the ground up," because standard components "automatically adopt this material" when you build with the current SDK ([Apple: Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)). The main design job is often removing things: custom bar backgrounds, extra blur views and decorative effects that now fight the system material.

## Regular or clear: which Liquid Glass variant should you use?

Use the regular variant almost everywhere, and the clear variant only for controls floating over photos or video. Apple notes that "most system components use" regular, and reserves clear for "components that appear over visually rich backgrounds" ([HIG: Materials](https://developer.apple.com/design/human-interface-guidelines/materials)).

|  | Regular | Clear |
| --- | --- | --- |
| Look | Blurs and adjusts the luminosity of what's behind it | Highly translucent; background stays prominent |
| Default in SwiftUI | Yes (`glassEffect()` uses regular) | No; opt in with the clear variant |
| Use for | Most controls, alerts, sidebars, popovers, anything with lots of text | Controls over photos, video and other media |
| Legibility risk | Low | High over bright or busy content |
| Extra step | None | Consider a dark dimming layer of 35% opacity over bright media |

If the media underneath is already dark, or you use AVKit's standard playback controls, which bring their own dimming, Apple says you don't need the extra layer.

## How do you build Liquid Glass in SwiftUI?

In SwiftUI, standard containers give you Liquid Glass for free, and three tools cover custom cases: the `glassEffect()` modifier, `GlassEffectContainer`, and the glass button styles. Apple documents all of them in its [adoption guide](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass).

| Design goal | SwiftUI API |
| --- | --- |
| Glass behind a custom view | `.glassEffect()`, regular variant in a capsule by default |
| Several glass shapes that blend and morph | `GlassEffectContainer(spacing:)` |
| A glass button without custom drawing | `.buttonStyle(.glass)` or `.buttonStyle(.glassProminent)` |
| Tab bar that shrinks while scrolling | `.tabBarMinimizeBehavior(.onScrollDown)` |
| Search as its own tab, placed at the trailing end | `Tab(role: .search)` |
| Tab bar that becomes a sidebar on iPad | `.tabViewStyle(.sidebarAdaptable)` |
| Keep controls legible over scrolling content | `.scrollEdgeEffectStyle(_:for:)` |
| Extend an image under a sidebar | `.backgroundExtensionEffect()` |
| Corners that match the device and container | `ConcentricRectangle` |

The basic modifier is one line. Apple's own example:

```swift
Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()

```

Per Apple, "SwiftUI uses the regular variant by default along with a Capsule shape," anchored to the view's bounds ([glassEffect documentation](https://developer.apple.com/documentation/swiftui/view/glasseffect(_:in:))).

When you have more than one custom glass element close together, wrap them in a container. It renders them together for performance and lets them blend as they approach each other; Apple says "the higher the spacing, the sooner blending begins" ([GlassEffectContainer documentation](https://developer.apple.com/documentation/swiftui/glasseffectcontainer)).

```swift
GlassEffectContainer(spacing: 20) {
    HStack(spacing: 20) {
        Button("Edit", systemImage: "pencil") { }
            .buttonStyle(.glass)
        Button("Share", systemImage: "square.and.arrow.up") { }
            .buttonStyle(.glass)
    }
}

```

UIKit and AppKit have equivalents (`UIGlassEffect`, `UIButton.Configuration.glass()`, `NSGlassEffectView`), so the same rules apply to older codebases.

## How do you design a Liquid Glass app icon?

Liquid Glass icons are built from layers, and Apple's Icon Composer is the tool for making them. Apple says Icon Composer "lets you create layered icons out of Liquid Glass from a single design for iPhone, iPad, Mac, and Apple Watch," with Default, Dark and Mono appearances and a flattened export for marketing ([Apple: Icon Composer](https://developer.apple.com/icon-composer/)).

The practical rules from Apple's adoption guide:

- Design in layers (background, mid and foreground shapes), because "the system automatically applies effects like reflection, refraction, shadow, blur, and highlights to your icon layers."
 - "Let the system handle applying masking, blurring, and other visual effects, rather than factoring them into your design." Do not bake gloss or shadows into the artwork.
 - Keep key elements centered; the system masks to a rounded rectangle on iPhone, iPad and Mac and a circle on Apple Watch.

For iOS 27, Apple added annotations in Icon Composer to apply refraction selectively and a preview of how the icon looks on earlier OS versions ([MacRumors](https://www.macrumors.com/2026/06/10/how-liquid-glass-is-changing-in-ios-27/)). If you only need the classic flat sizes for older OS versions or the App Store listing, our [app icon generator](https://superapp.dev/tools/app-icon-generator) and [app icon sizes](https://superapp.dev/tools/app-icon-sizes) tools cover that, and we compare AI options in [best AI app icon generators](https://superapp.dev/blog/best-ai-app-icon-generators).

## How do you keep a Liquid Glass app readable and accessible?

Keep text off busy glass, keep glass off content, and test every screen with the system settings that change how glass renders. Legibility is the main criticism of Liquid Glass. Nielsen Norman Group's review of iOS 26 found that "text on top of text creates an illegible mess" and concluded that "Apple is prioritizing spectacle over usability" ([NN/g, Raluca Budiu, October 2025](https://www.nngroup.com/articles/liquid-glass/)).

Apple has responded with user controls, which means your app will be seen in more than one look:

| Setting | Where | What it does to glass |
| --- | --- | --- |
| Liquid Glass: Clear or Tinted (iOS 26.1) | Settings > Display & Brightness | Tinted gives menus and buttons a frosted look closer to iOS 18 ([Macworld](https://www.macworld.com/article/2947565/ios-26-1-beta-4-does-the-unthinkable-you-can-control-how-glassy-liquid-glass-should-be.html)) |
| Transparency slider (iOS 27) | Settings | Ranges from ultra clear to fully tinted ([MacRumors](https://www.macrumors.com/2026/06/10/how-liquid-glass-is-changing-in-ios-27/)) |
| Reduce Transparency | Accessibility settings | Makes glass more opaque |
| Increase Contrast | Accessibility settings | Raises contrast of glass elements |
| Reduce Motion | Accessibility settings | Tones down morphing and motion effects |

Apple's guidance is to "test your app's custom elements, colors, and animations with different configurations of these settings" ([Apple: Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)). Two more rules from the same guide matter for accessibility: provide an accessibility label for every icon in a toolbar, and don't mix text and icons in items that share one glass background.

A simple test pass for each key screen: light mode, dark mode, Tinted, Reduce Transparency, Increase Contrast, the largest Dynamic Type size, and a bright photo scrolled under every bar.

## Can you opt out of Liquid Glass?

Only temporarily, and that window is closing. Apple provides an Info.plist key, `UIDesignRequiresCompatibility`, that keeps your app's previous look while building with the new SDK ([Apple: Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)). Apple's documentation describes it as temporary: "Temporarily use this key while reviewing and refining your app's UI for the design in the latest SDKs," and "the system ignores this key when you build for iOS 27 or later" ([Apple Developer Forums](https://developer.apple.com/forums/thread/832543)).

An Apple engineer clarified in the same thread that the key is still honored for apps linked against the iOS 26 SDK, even on iOS 27 devices; it stops working once you build with the iOS 27 SDK. Meanwhile, since April 28, 2026, "Apps uploaded to App Store Connect must be built with Xcode 26 or later using an SDK for iOS 26" ([Apple: Upcoming requirements](https://developer.apple.com/news/upcoming-requirements/)). Apple had not announced an iOS 27 SDK deadline as of that thread, but the direction is clear: plan for Liquid Glass, not around it.

## What are the most common Liquid Glass design mistakes?

Most problems come from adding glass where Apple's system already handles it, or from putting it where content should be.

- Glass on content: cards, list rows or whole backgrounds made of glass, which flattens the hierarchy Apple designed the material to create.
 - Glass on glass: stacking glass elements, which Apple warns against ("Avoid overcrowding or layering Liquid Glass elements on top of each other").
 - Keeping old custom bar backgrounds or blur views, which now clash with the system material.
 - Clear glass over bright photos with no dimming layer, leaving white text unreadable.
 - Long text inside glass controls; keep labels short or use the regular variant.
 - Hiding a view inside a toolbar item instead of hiding the item, which leaves an empty glass capsule.
 - Designing only for the default Clear look and never checking Tinted, Reduce Transparency or the iOS 27 slider.
 - Baking shine and shadows into the app icon instead of letting the system render them.

## Can you design Liquid Glass in Figma?

Yes, for layout and review, but the real material only exists on device. Apple's [Design Resources](https://developer.apple.com/design/resources/) page offers an iOS and iPadOS 27 UI kit for Figma and Sketch, which is the most reliable starting point for bars, sheets and controls in the current style. A static mockup cannot show lensing, morphing or how glass reacts to content scrolling underneath, so treat Figma as the plan and an on-device build as the truth. Our guide on [how to design an app](https://superapp.dev/blog/how-to-design-an-app) covers the wider design process, and [Figma to iOS app](https://superapp.dev/figma-to-ios-app) covers turning a design into native screens.

## Building a Liquid Glass app without writing Swift

Because Liquid Glass comes mainly from Apple's native components, the most direct way to get it right is to build a native app. With Xcode, you write SwiftUI yourself, and AI coding tools such as Claude Code or Cursor can help you write it. Cross-platform frameworks vary in whether and how they use Apple's native components, so check how yours handles Liquid Glass before you commit.

As a disclosure, Superapp is our product, so weigh this accordingly. Superapp generates native Swift apps from a plain-English description in the browser, with no Mac required, automated App Store publishing, and Figma import on the Pro plan ([Superapp](https://superapp.dev/)). Because the output is native, it uses the standard Apple components that Apple says adopt Liquid Glass automatically when built with the current SDK. Superapp does not replace design judgment: you still decide where custom glass belongs and test readability, and it builds for Apple platforms only, so it is not the pick if you also need Android. New users get free credits in most countries, and Pro is $25 a month ([Superapp pricing](https://superapp.dev/pricing)).

## Frequently Asked Questions

**What is Liquid Glass design?**
Liquid Glass is Apple's translucent interface material, introduced in June 2025 for iOS 26 and the other Apple platforms. It reflects and refracts what is behind it and adapts to content, and it is used for controls and navigation that float above an app's content.

**Where should I use Liquid Glass in my app?**
On the navigation and control layer: tab bars, toolbars, sidebars, sheets and a few key floating buttons. Apple's guidelines say not to use it in the content layer, such as lists, cards and backgrounds.

**What is the difference between regular and clear Liquid Glass?**
Regular blurs and adjusts the luminosity of what is behind it and is used by most system components. Clear is highly translucent and meant for controls over photos and video, often with a 35% dark dimming layer when the media is bright.

**How do I add Liquid Glass in SwiftUI?**
Standard components adopt it automatically. For custom views, use the glassEffect() modifier, group nearby glass elements in a GlassEffectContainer, and use the glass or glassProminent button styles for buttons.

**How do I make a Liquid Glass app icon?**
Use Apple's Icon Composer to build a layered icon from one design, with Default, Dark and Mono appearances. Let the system add reflection, refraction, shadow and highlights rather than drawing them into the artwork.

**Can I turn off Liquid Glass in my app?**
Temporarily. The UIDesignRequiresCompatibility Info.plist key keeps the previous look for apps built with the iOS 26 SDK, but Apple says the system ignores it when you build for iOS 27 or later.

**Is Liquid Glass bad for accessibility?**
It can hurt legibility when overused; Nielsen Norman Group criticized iOS 26 for text over busy glass. Apple added a Clear or Tinted setting in iOS 26.1 and a transparency slider in iOS 27, and glass responds to Reduce Transparency and Increase Contrast, so test your app with each.

**Did Liquid Glass change in iOS 27?**
Yes, it was refined rather than replaced. iOS 27 improves how glass diffuses busy content, adds darker edges and brighter highlights, adds a transparency slider, and updates Icon Composer with refraction annotations.

**Can I design Liquid Glass in Figma?**
Yes for layout, using Apple's iOS and iPadOS 27 UI kit for Figma. A static mockup cannot show lensing or morphing, so check the final look in a native build on a device.

## References

- [Apple Newsroom: Apple introduces a delightful and elegant new software design (June 9, 2025)](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/)
 - [Apple: Human Interface Guidelines, Materials](https://developer.apple.com/design/human-interface-guidelines/materials)
 - [Apple: Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)
 - [Apple: glassEffect(_:in:)](https://developer.apple.com/documentation/swiftui/view/glasseffect(_:in:))
 - [Apple: GlassEffectContainer](https://developer.apple.com/documentation/swiftui/glasseffectcontainer)
 - [Apple: Icon Composer](https://developer.apple.com/icon-composer/)
 - [Apple: Design Resources](https://developer.apple.com/design/resources/)
 - [Apple: WWDC25 Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/)
 - [Apple Developer Forums: Planned removal of UIDesignRequiresCompatibility](https://developer.apple.com/forums/thread/832543)
 - [Apple: Upcoming SDK minimum requirements](https://developer.apple.com/news/upcoming-requirements/)
 - [Nielsen Norman Group: Liquid Glass Is Cracked, and Usability Suffers in iOS 26](https://www.nngroup.com/articles/liquid-glass/)
 - [Macworld: iOS 26.1 lets you control how glassy Liquid Glass is](https://www.macworld.com/article/2947565/ios-26-1-beta-4-does-the-unthinkable-you-can-control-how-glassy-liquid-glass-should-be.html)
 - [MacRumors: Here's How Liquid Glass Is Changing in iOS 27](https://www.macrumors.com/2026/06/10/how-liquid-glass-is-changing-in-ios-27/)
 - [Superapp](https://superapp.dev/)
 - [Superapp pricing](https://superapp.dev/pricing)
 - [Superapp: Figma to iOS app](https://superapp.dev/figma-to-ios-app)
 - [Superapp: How to design an app](https://superapp.dev/blog/how-to-design-an-app)

## Keep reading

[Replit Pricing (Nov 2026): Plans, Credits and Real Cost

Nov 3, 2026](https://superapp.dev/blog/replit-pricing) [Base44 Pricing (Nov 2026): Plans, Credits and Real Cost

Nov 3, 2026](https://superapp.dev/blog/base44-pricing) [Best AI Website Builders in 2026: 15 Compared

Nov 3, 2026](https://superapp.dev/blog/best-ai-website-builders)

## Build iOS apps with AI

Turn your ideas into production-ready iOS apps. Fast and easy.

[Get started](https://superapp.dev/)