Degradados lineales, radiales y angulares
Rellene las vistas con transiciones de color suaves.
Degradados lineales, radiales y angulares es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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!
Preguntas frecuentes
¿La lección «Degradados lineales, radiales y angulares» es gratis?
Sí — el texto completo de «Degradados lineales, radiales y angulares» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Degradados lineales, radiales y angulares»?
Rellene las vistas con transiciones de color suaves. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Degradados lineales, radiales y angulares»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El tipo Color y los colores de recursos
- Degradados lineales, radiales y angulares
- Formas integradas
- Trazo, relleno y overlay