SwiftUI - How does Apple Music create their background gradient?

user_5657412 0
Viewed 475

I was taking a look at the background that Apple Music uses when displaying the currently playing song, like these:

enter image description here enter image description here

I really like the way that these backgrounds echo the color of the album cover, but I'm not entirely sure how I could implement something similar, given an Image. At first I thought it was just a magnified and blurred copy of the album Image, like this:

Image("album cover")
    .resizable()
    .frame(width: 300, height: 300)
    .blur(radius: 20)

But looking at the two images above I don't think this is the case, as not all colors in the cover image are included. Instead, do they use a radial gradient? If so, how do they pick which colors to use, and how could I do something similar, given an Image?

Thanks for the help!

apple-music swiftui image
1 Answers

I went through a similar exercise lately and here is what I've used

.background {
        ZStack {
            Rectangle()
                .fill(backgroundColor().gradient)
                .edgesIgnoringSafeArea(.all)

            Rectangle()
                .fill(.ultraThinMaterial)
                .edgesIgnoringSafeArea(.all)
        }
    }

Note that .gradient is available since iOS 16. The background color can be any swiftui color. In my case I'm using the average color of the song artwork available with MusicKit since iOS 15.

user_49155810
Related