How to Apply Shadow to Interior Views in Swiftui

How to apply shadow to interior views in SwiftUI?

You can use clipped() here to fix this

VStack() {
    Text("Text")
        .background(Color.red)
        .padding()
        .padding()

    Text("Text")
        .background(Color.purple)
        .padding()
}
.padding()
.background(Color.white)

.clipped()
.shadow(color: Color.red, radius: 10, x: 0, y: 0)

Output:

Hope it is helpful :)

How to make Inner shadow in SwiftUI

This is what I did to create an inner shadow like the one in the picture. I created it in another swiftui file and just called in in my main content view but you can display it however you'd like.

I created a Button in a ZStack only because I first recreated it with a rounded rectangle but I think this would would in a HStack or VStack as well just haven't tried them. To create the inner shadow I created an overlay and clipped the shadows to the shape.

ZStack{
        
        Button(action: {}){
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 40, height: 40)
                .padding(25)
                .foregroundColor(Color(red: 52/255, green: 57/255, blue: 133/255))
                .overlay(
                    RoundedRectangle(cornerRadius: 15)
                        .stroke(Color(red: 236/255, green: 234/255, blue: 235/255), 
                                lineWidth: 4)
                        .shadow(color: Color(red: 192/255, green: 189/255, blue: 191/255), 
                                radius: 3, x: 5, y: 5)
                        .clipShape(
                            RoundedRectangle(cornerRadius: 15)
                        )
                        .shadow(color: Color.white, radius: 2, x: -2, y: -2)
                        .clipShape(
                            RoundedRectangle(cornerRadius: 15)
                        )
                )
                .background(Color(red: 236/255, green: 234/255, blue: 235/255))
                .cornerRadius(20)
        }

The end result looked like this:

You can play around with the colors and the shadows to get exactly what you want but hopefully this helps!

How to apply a blur to shadow in SwiftUI

Try adding a second background. You can't blur a shadow directly. Blur will act on the whole view, as I am sure you found out. If you don't want to blur your background, add another background of the shadow color, add the shadow and then blur. I through an .opacity() modifier in there as well to further tweak the look.

    Text("Hello, World!")
        .padding()
        .background(Color.red)
        .background(Color.black
                        .opacity(0.5)
                        .shadow(color: .black, radius: 6, x: 0, y: 4)
                        .blur(radius: 8, opaque: false)
        )

How to add shadow to Form Section?

Here, it is because UIKit! we should first get rid of UITableView default

backgroundColor color, then it will work.

---

---

struct ContentView: View {
    
    init() { UITableView.appearance().backgroundColor = UIColor.clear }
    
    var body: some View {
        
        Form {
            
            Section(header: Text("Setting"), content: { Text("Some text there!") })
            
            Section { Text("Some text there!") }
            
            Section { Text("Some text here!") }
            
        }
        .padding()
        .shadow(color: Color.secondary, radius: 10, x: 5, y: 5)
        .background(Color(UIColor.systemGray4).ignoresSafeArea())
        
    }
}

How to make inner shadow in SwiftUI?

For this problem, I built a modifier for the View protocol and a extension, like below

View+innerShadow.swift

import SwiftUI

extension View {
    func innerShadow(color: Color, radius: CGFloat = 0.1) -> some View {
        modifier(InnerShadow(color: color, radius: min(max(0, radius), 1)))
    }
}

private struct InnerShadow: ViewModifier {
    var color: Color = .gray
    var radius: CGFloat = 0.1

    private var colors: [Color] {
        [color.opacity(0.75), color.opacity(0.0), .clear]
    }

    func body(content: Content) -> some View {
        GeometryReader { geo in
            content
                .overlay(LinearGradient(gradient: Gradient(colors: self.colors), startPoint: .top, endPoint: .bottom)
                    .frame(height: self.radius * self.minSide(geo)),
                         alignment: .top)
                .overlay(LinearGradient(gradient: Gradient(colors: self.colors), startPoint: .bottom, endPoint: .top)
                    .frame(height: self.radius * self.minSide(geo)),
                         alignment: .bottom)
                .overlay(LinearGradient(gradient: Gradient(colors: self.colors), startPoint: .leading, endPoint: .trailing)
                    .frame(width: self.radius * self.minSide(geo)),
                         alignment: .leading)
                .overlay(LinearGradient(gradient: Gradient(colors: self.colors), startPoint: .trailing, endPoint: .leading)
                    .frame(width: self.radius * self.minSide(geo)),
                         alignment: .trailing)
        }
    }

    func minSide(_ geo: GeometryProxy) -> CGFloat {
        CGFloat(3) * min(geo.size.width, geo.size.height) / 2
    }
}

And, for the inner shadow, you just need to add .innerShadow(color:radius)

ContentView.swift

import SwiftUI

struct ContentView: View {

    var body: some View {
        Rectangle()
            .foregroundColor(.green)
            .frame(width: 400, height: 300)
            .innerShadow(color: Color.black.opacity(0.3), radius: 0.05)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Matching parent's width on iOS works but doesn't work on Mac OS (SwiftUI)

Use .buttonStyle(PlainButtonStyle()) and fixedSize()(optioanl fixedSize())

Button(action: {}) {
    Text("HELLO")
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.red)
        .fixedSize()
}
.buttonStyle(PlainButtonStyle())

---

Related Topics