0Pricing
SwiftUI Academy · Leçon

Dégradés linéaires, radiaux et angulaires

Remplissez les vues avec des transitions de couleur fluides.

Dégradés linéaires, radiaux et angulaires est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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: .bottomTrailing

More 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!

Questions Fréquemment Posées

La leçon « Dégradés linéaires, radiaux et angulaires » est-elle gratuite ?

Oui — le texte complet de « Dégradés linéaires, radiaux et angulaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Dégradés linéaires, radiaux et angulaires » ?

Remplissez les vues avec des transitions de couleur fluides. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?

Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Dégradés linéaires, radiaux et angulaires » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?

Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Le type Color et les couleurs des ressources
  2. Dégradés linéaires, radiaux et angulaires
  3. Formes intégrées
  4. Contour, remplissage et superposition
← Retour à SwiftUI Academy