Gradients, materials, and shadows

Gradients, materials, and shadows

Gradients — LinearGradient, RadialGradient, AngularGradient, MeshGradient — are styles, and can be used anywhere a color is accepted. Materials, such as .regularMaterial and .thinMaterial, are translucent backgrounds that blur whatever is behind them and adapt to light and dark mode. .shadow adds depth. The modifiers foregroundStyle and backgroundStyle accept any of these.

Since iOS 26, the system's own bars, tab bars, and controls use Liquid Glass, a newer material that Lesson 49 covers. Use the standard materials for the backgrounds of your content, and leave the bars and controls to the system.

Build a card with a gradient background, a material panel on top of it holding some text, and a soft shadow. Check that the text stays readable in both light and dark mode.

1. Where can a gradient be used in SwiftUI?
2. What does a material do that a half-transparent color does not?
3. Why is text on a material usually styled with .foregroundStyle(.secondary) rather than a fixed color?

• Material
• MeshGradient
• Drawing and graphics