radial gradient shape in swiftui - swiftui

Question

hey everyone, I designed some stuff in figma and now that Im trying to transfer everything to swiftui I'm having some troubles. Does anyone know how I can make this ellipse shaped gradient in swiftui? I tried the swuiftui inspector but it just gave me a circular shape. Thanks for the help.

Answer 1

iOS15 only :
struct ContentView: View {
var body: some View {
Rectangle()
.fill(
.ellipticalGradient(
colors: [.red, .orange, .yellow],
center: .center,
startRadiusFraction: 0.2,
endRadiusFraction: 0.6
)
)
}
}
or :
struct ContentView2: View {
let gradient = Gradient(stops:
[.init(color: .red, location: 0.2),
.init(color: .orange, location: 0.6),
.init(color: .yellow, location: 0.8)])
var body: some View {
Rectangle()
.fill(
.elliptical(gradient,
center: .center,
startRadiusFraction: 0.1,
endRadiusFraction: 0.6)
)
}
}

Answer 2

You can use RadialGradient by applying scaleEffect modifier to shrink it:
struct ContentView: View {
let gradient = Gradient(
stops: [
.init(color: .green.opacity(0.4), location: 0),
.init(color: .green.opacity(0.5), location: 0.7),
.init(color: .green.opacity(0), location: 1),
]
)
var body: some View {
GeometryReader { geometry in
Rectangle()
.fill(
RadialGradient(
gradient: gradient,
center: .center,
startRadius: 0,
endRadius: geometry.size.width / 2
)
)
.scaleEffect(x: 1, y: geometry.size.height / geometry.size.width, anchor: .center)
}
}
}
Since iOS 15 you can get rid of both GeometryReader and scaleEffect using EllipticalGradient, so it may be more performant, or at least less code:
struct ContentView: View {
let gradient = Gradient(
stops: [
.init(color: .green.opacity(0.4), location: 0),
.init(color: .green.opacity(0.5), location: 0.7),
.init(color: .green.opacity(0), location: 1),
]
)
var body: some View {
Rectangle()
.fill(
EllipticalGradient(
gradient: gradient,
center: .center
)
)
}
}
Both variants looks totally the same: