How can we Blur a Shape with Gradient in SwiftUI?

Question

Was trying to blur my circle with a gradient can't figure out why it doesn't work. Anybody have ideas or is this not supported yet?

struct GradientExperiment: View {
var body: some View {
    VStack {
        //blur works
        Circle()
            .fill(Color(.blue))
            .frame(width: 50, height: 50)
            .blur(radius: 10)

        //blur does not work
        Circle()
            .fill(LinearGradient(gradient: Gradient(colors: [.blue,.red]), startPoint: .bottom, endPoint: .top))
            .frame(width: 50, height: 50)
            .blur(radius: 10)
    }
}

}

Answer 1

Add a mask to your LinearGradient and use the Circle as a mask:

LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .bottom, endPoint: .top)
  .mask(
    Circle()
      .frame(width: 50, height: 50)
      .blur(radius: 10)
    )