Background Colour Driving me CRAZY

I wonder if you can help me…
Im trying to have a gradient background on my app, with an animation on top. I want the gradient to go from the top left corner to the bottom right. So far its proving to be very difficult! please see the code below. I apologise in advance if I have made any glaring errors but I’m very new to this.

struct LaunchScreenView: View {
        @State var isAnimating = false
        @State var image = "Link logo"
    var body: some View {
        ZStack {
          LinearGradient(gradient: .init(colors: [UIColor.cyan.cgColor, UIColor.magenta.cgColor]), startPoint = CGPoint(x: 1.0, y: 1.0), endPoint = CGPoint(x: 0.0, y: 0.0)
            VStack {
                    .frame(width: 150, height: 150)
                    .rotationEffect(Angle(degrees: isAnimating ? 1080 : 0))
                            .easeInOut(duration: 0.7)
                            .delay(isAnimating ? 0.5 : 0)
                            .repeatForever(autoreverses: false)
                    .scaleEffect(isAnimating ? 1 : 0)
                                .easeInOut(duration: 0.7)
                                .delay(isAnimating ? 0.5 : 0)
                                .repeatForever(autoreverses: true)
            }.frame(width: 213, height: 213)
                Timer.scheduledTimer(withTimeInterval: 2.4, repeats: true) {_ in self.image = ""
                self.isAnimating = true

struct LaunchScreenView_Previews: PreviewProvider {
    static var previews: some View {

Hi Spike,

Welcome to the Code Crew community

When specifying colors in a Gradient you can’t use UIColors. What you would have to do if you wanted to use a specific UIColor is to specify the RGB values that relate to those colors and use:

Color(red: Double, green: Double, blue: Double)

When specifying the start and end points they are a UnitPoint which is a value from 0, 0 (top Left) to 1,1 (bottom right) which you would specify as:

startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1)

So a gradient from blue to red starting at the top left and ending at the bottom right (using the standard SwifUI colors) and going up under the notch and right to the bottom past the safe area would be:

LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1))

Using cyan and magenta equivalent RGB values you would have:

LinearGradient(gradient: Gradient(colors: [Color(red: 0, green: 1.0, blue: 1.0), Color(red: 1.0, green: 0, blue: 1.0)]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1))

More information on the RGB equivalent color values here:

Thank you very much for the help! Its really appreciated!

1 Like