how can i replicate this background texture and color style in SwiftUI?

Eudora

This is my example code of my app. I want my background to be like this image with soft pink transition to soft blue with some texture soft blur on top of it. enter image description here

how may i replicate this with just swiftui?

xTwisteDx

So the first thing you're going to want to do is to utilize LinearGradient and RadialGradient which are the two types of gradients that you can use to compose several layers. There are other ways you can do it by using .background or .overlay modifiers however in my example I want to keep it as simple as possible and allow you the freedom to explore other options with it. I've created two extensions so that you can simply reference LinearGradient.blueClearGradient, for example, directly anywhere in your app. NOTE:: I used different colors, feel free to use what you want to use for your colors. I did this to make it more visually apparent what the individual pieces of the view were composed of.

extension LinearGradient {  
    static let blueClearGradient = LinearGradient(colors: [.blue, .clear],
                                             startPoint: .bottom,
                                             endPoint: .top)
}

extension RadialGradient {
    static let radialYellowGradient = RadialGradient(colors: [.yellow, .clear],
                                                 center: .topLeading,
                                                 startRadius: 100,
                                                 endRadius: 400)

    static let radialRedGradient = RadialGradient(colors: [.red, .clear],
                                               center: .topTrailing,
                                               startRadius: 100,
                                               endRadius: 400)
}

Once you have those extensions it's as simple as utilizing them the same as you would any other view. You can use them to .fill or even as a straight up view themselves. In this example, I used them as a .fill for a shape.

struct GradientExample: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(RadialGradient.radialRedGradient)
            Rectangle()
                .fill(RadialGradient.radialYellowGradient)
            Rectangle()
                .fill(LinearGradient.blueClearGradient)
        }
    }
}

Doing it this way produces a view that might look something like this.

Gradient Example

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I replicate this shadow + offset in SwiftUI

How can I remove background Color from section in SwiftUI?

SwiftUI - How can I blur the default background color of a view?

How can I change the background color of the navigation bar in SwiftUI?

How can I change background color of button in SwiftUI?

How can I change background Color of Stepper in SwiftUI?

How do I replicate the rough looking notes app background with SwiftUI?

How do I override the style background color?

How can I get my element.style.background to use type="color" as value?

how can I style ckeditor5?( background-color and stuff )

How can I make a SwiftUI List row background color extend the full width, including outside of the safe area

How can I make a background in SwiftUI translucent?

How to replicate UIKit/SwiftUI elements background (like the UITabBar/TabView background)

How can I change the Style of a WPF TabControl's ItemTemplate so that I can set the Tab Headers' Background color?

LWJGL How can I render texture shape in white color

I made my navbar fixed and now it's transparent no matter what I style the background color to be. How can I fix this?

How can I change background color of PageViewController?

How can I change background color for the desktop?

How can I change footer background color?

How can I change background color

How can I set Background Color for a Scene?

How do I override div style:background-color with class?

How do I style a ttk.LabelFrame, specifically the background color?

How do I modify the background color of a List in SwiftUI?

How can I display a background image on top of background color?

Three.js. How do I use a custom material for a scene background rather then color or texture?

How can I make a text editor with some style in SwiftUI?

How can I set the background of a StackPanel to an ImageBrush defined in a style resource?

How can I change background-style of div with a selection box?