Linear, Radial & Angular Gradients
Fill views with smooth color transitions.
Linear, Radial & Angular Gradients is a free SwiftUI Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a Gradient?
A gradient blends smoothly between two or more colors. It adds depth and polish that a flat fill cannot. 🌈
Gradients Are Views Too
Just like Color, a LinearGradient is a view. You can place it directly or use it to fill a shape or background.
Your First LinearGradient
A LinearGradient flows colors along a straight line. Give it colors plus a start and end point to set the direction.
LinearGradient(
colors: [.blue, .purple],
startPoint: .top,
endPoint: .bottom
)Choosing Start & End Points
Points like .topLeading and .bottomTrailing aim the gradient diagonally. Swap them to change the angle of the blend.
startPoint: .topLeading
endPoint: .bottomTrailingMore Than Two Colors
Pass several colors and the gradient spreads them evenly across its length. Great for sunset-style backgrounds.
LinearGradient(
colors: [.orange, .pink, .purple],
startPoint: .leading,
endPoint: .trailing
)RadialGradient Glows Outward
A RadialGradient radiates from a center point outward in a circle. It is perfect for spotlights and soft glows.
RadialGradient(
colors: [.yellow, .red],
center: .center,
startRadius: 5,
endRadius: 120
)Tuning the Radius
The startRadius and endRadius control how tight or wide the glow spreads. Bigger gaps mean smoother, slower fades.
AngularGradient Sweeps Around
An AngularGradient wraps colors around a center, like a color wheel. It creates a cool conical, swirling effect.
AngularGradient(
colors: [.red, .green, .blue, .red],
center: .center
)Gradient as a Background
Attach a gradient with the background modifier to brighten any view behind your content. Instant visual lift.
Text("Hi")
.padding()
.background(LinearGradient(
colors: [.blue, .cyan],
startPoint: .top, endPoint: .bottom))Shorthand Gradients
For a quick blend, call .gradient on any color. SwiftUI builds a subtle top-to-bottom gradient for you instantly.
Circle()
.fill(Color.blue.gradient)Pick the Right Gradient
Use linear for directional fades, radial for glows, and angular for wheels. Each gives a different mood to your UI. 🎨
Quick Check
Which gradient sweeps its colors around a center point?
Recap: Gradients
You now blend colors three ways: linear along a line, radial from a center, and angular around a wheel. Beautiful work!
Frequently asked questions
Is the “Linear, Radial & Angular Gradients” lesson free?
Yes — the full text of “Linear, Radial & Angular Gradients” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Linear, Radial & Angular Gradients”?
Fill views with smooth color transitions. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Linear, Radial & Angular Gradients” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Color Type & Asset Colors
- Linear, Radial & Angular Gradients
- Built-in Shapes
- Stroke, Fill & overlay