SwiftUI shadow - spread parameter

Question

Created Mar ’21

Replies 2

Boosts 0

Views 2.9k

Participants 3

Is there any way how to create shadow in SwiftUI with the spread parameter (means of how much greater the shadow should be than the original view)? I've tried to use custom implementation of shadow using background Color with blur, but it resulted in performance issues.

Code Block swiftcontent
    .background(GeometryReader { geometry in
        Rectangle()
            .fill(color)
            .frame(width: geometry.size.width + spread,
                         height: geometry.size.height + spread)
            .cornerRadius(isCircle ? (geometry.size.width + spread) / 2 : cornerRadius)
            .padding([.top, .leading], -spread / 2)
            .padding(.leading, x)
            .padding(.top, y)
            .blur(radius: blur)
    })

I haven't found any other resources. I think that shadowPath would be helpful using UIKit, but I don't know any way ho to achieve it using SwiftUI.

Thanks for any advice!

Boost

Answer 1

OnionSource OP

Mar ’21

Not sure if this is what your after, but it might help ...

Code Block struct ContentView: View {
  var body: some View {
    VStack(spacing: 100) {
      ShadowView(color: .red)
        .shadow(color: .black, radius: 10, x: 0.0, y: -5.0)
      ShadowView(color: .green)
        .shadow(color: .black, radius: 10, x: 0.0, y: 0.0)
        .shadow(color: .black, radius: 10, x: 0.0, y: 0.0)
      ShadowView(color: .blue)
        .shadow(color: .black, radius: 30, x: 0.0, y: 20.0)
    }
  }
}
struct ShadowView: View {
  var color: Color
  var body: some View {
    RoundedRectangle(cornerRadius: 25.0)
      .fill(color)
      .frame(width: 200, height: 100)
  }
}

0

Answer 2

alexis-ag OP

Sep ’22

i got a solution using blur, offset and padding

https://gist.github.com/alexis-ag/5565bda1e7a1cd5b740d12cc2e09e2a6 here is my gist

{YOUR_VIEW}.dropShadow(type: .sameView(opacity: 1), radius: 6, offset: .init(x: 0, y: 30), spread: .init(width: -20, height: -20))

0