macosswiftuiliquid-glassmacos-tahoe

How to achieve macOS Control Center's Liquid Glass?


The .glassEffect modifier introduced at WWDC25 only allows for the following effect:

my attempt

Is there a way to achieve the effect of the tiles in macOS 26's Control Center (with more translucency and luminosity on the corners)?

Control Center - macOS 26

My attempt:

struct LiquidGlassButtonStyle: ButtonStyle {

    @State private var backgroundLuminosity: Double = 1.0
    private var adaptiveGlassTint: Color? {
        if backgroundLuminosity > 0.7 { return Color.black.opacity(0.2) }
        if backgroundLuminosity < 0.4 { return Color.white.opacity(0.5) }
        return nil
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(adaptiveGlassTint)
            .glassEffect()
            .mask(
                Circle()
            )
            .saturation(1.5)
            .brightness(0.05)
            .overlay(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [
                            .white, .white.opacity(0.2), .white, .white.opacity(0.2), .white
                        ]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 0.6
                )
                .rotationEffect(.degrees(45))
                .opacity(0.7)
                .padding(-0.6)
            )
            .background(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [
                            .white, .white.opacity(0.15), .white, .white.opacity(0.15), .white
                        ]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 1
                )
                .rotationEffect(.degrees(45))
                .opacity(0.6)
            )
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
            .animation(.bouncy, value: configuration.isPressed)
    }
}

Solution

  • Based on WWDC's presentation there should be a .clear variant for .glassEffect(). Weirdly it's not available yet in the current Xcode build, only the .regular variant is available now. I'm expecting that to be available in future release.

    The clear variant is currently not yet available in SwiftUI documentation.
    https://developer.apple.com/documentation/swiftui/glass