I want to achieve this kind of gradient shadow in swiftUI button. Any help or suggetion will be appreciated. I have already achieved gradient border. Thanks in advance!!
You could create custom ButtonStyle
implementation of which may look like this one:
struct GradientButtonStyle: ButtonStyle {
private struct GradientButtonPreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) { }
}
@State private var buttonSize: CGSize = .zero
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(.white)
.clipShape(RoundedRectangle(cornerRadius: 10))
.overlay {
GeometryReader { proxy in
Color.clear
// Getting current size of button
.preference(key: GradientButtonPreferenceKey.self, value: proxy.size)
}
}
.background {
Rectangle()
// We'll use Linear gradient with three colors I can see in your example.
.fill(LinearGradient(colors: [.yellow, .purple, .blue],
startPoint: .leading,
endPoint: .trailing))
// You can adjust gradient size by multilplying its value on desired factor here
.frame(width: buttonSize.width, height: buttonSize.height)
// Higher the number further from body gradient will be "sprayed".
.blur(radius: 30)
// Makes cool effect of pressing the button.
.opacity(configuration.isPressed ? 0.7 : 1)
}
.onPreferenceChange(GradientButtonPreferenceKey.self, perform: { value in
buttonSize = value
})
}
}
And after usage of the style:
Button("Custom Gradient Button") {}
.buttonStyle(GradientButtonStyle())
You get the result:
NOTE: Once gradient being blurred it is impossible(at least I don't know the way) to get the frame of the "sprayed" area, so all spacing, padding et cetera. Will be calculated from the body of the button, in this current case – white rectangle.