How to achieve this vibrant background effect on iOS?

UI Frameworks SwiftUI
nextglabs OP
Created 1w
Replies 4
Boosts 0
Views 360
Participants 3

Hi everyone,

I'm trying to reproduce an effect that Apple has created for the Contacts app on iOS, iPadOS and MacOS v26.4 where the contact card is displayed with a nice material frosted background that blends well with the underlying background.

I love this effect and I want to use it in my app to display different information. As you can see in the screenshot, the list rows have a frosted background (probably thinMaterial) combined with a vibrant effect that adapts to the underlying view background. Additionally, the fields labels and icons also have a nice effect.

I've tried everything but I'm unable to accurately recreate this effect. I tried applying a Rectangle with a material background listRowBackground but this resulted in something different than what Apple is using (either too light, too dark, or simply not vibrant).

I've even tried SwiftUIVisualEffects swift package which can apply a vibrancy effect. However the result is still not the same as the one you see in the screenshot, with the correct contrast between background and labels.

Any guidance would be appreciated. Thank you 🙏🏻

Replies  4
Boosts  0
Views  360
Participants  3
darkpaw OP
1w

I hope that's test data and you haven't actually posted someone's private details on the internet...

0
darkpaw OP
1w

Good, now what have you actually tried? Show us some code.

Is it the background of the data fields you want to get, i.e. the rounded rectangle boxes on top of the large AH background?

It looks like some sort of simple gradient. What have you tried?

0
nextglabs OP
1w

Thanks @darkpaw. Here is a simplified version of the code

import SwiftUI

struct DetailView: View {
    var body: some View {
        ZStack {
            GradientBackdrop()

            List {
                Section {
                    LabeledValueRow(
                        label: "Company",
                        value: "ACME Inc."
                    )
                    LabeledValueRow(
                        label: "Email",
                        value: "test@example.com"
                    )
                    Text("Schedule Appointment")
                    Text("Add to Favorites")
                }
                .listRowBackground(
                    Rectangle()
                        .background(.thinMaterial)
                        .colorScheme(.dark)
                )
                .listRowSeparatorTint(.white.opacity(0.4))
                .colorScheme(.dark)
            }
            .listSectionSpacing(.compact)
            .scrollContentBackground(.hidden)
        }
    }
}

#Preview {
    DetailView()
}

What I want to achieve is something like this, where the rows adapt to the underlying color

0
DTS Engineer OP
Apple
1w

Thank you for your post.

As per our policy, we are unable to provide details regarding the design of apps built internally.

However, we encourage you to looks into Liquid Glass to make sure to take advantage of the standard components like bars, sheets, popovers, adopt liquid glass and have a new visual refresh, please see Adopting Liquid Glass.

https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass

I would also recommend this Tech Note https://developer.apple.com/documentation/technotes/tn3187-migrating-to-the-uikit-scene-based-life-cycle

There are very exciting UI to create your own design you can take advantage with Liquid Glass. Looking forward to see what you come up with.

Albert
  Worldwide Developer Relations.

1
How to achieve this vibrant background effect on iOS?
First post date Last post date
 
 
Q