# Arrière-plans dégradés animés pour la vidéo et les réseaux

[Canonical HTML page](https://gradiently.design/fr/guide/animated-gradient-background)

Un dégradé animé peut ressembler à de la lumière glissant sur de la soie, ou à un économiseur d’écran. La différence tient à une poignée de choix de design que l’on peut faire exprès.

## The short version

- Un arrière-plan dégradé animé est un fondu de couleurs qui bouge dans le temps, en général par dérive de position, changement de forme, glissement de teinte ou lumière qui respire.
- Les dégradés animés calmes ne font bouger qu’une ou deux propriétés, lentement, avec plusieurs secondes ou plus pour un cycle complet ; tout bouger à la fois paraît agité.
- Les couleurs voisines sur le cercle chromatique s’animent proprement, alors que des couleurs opposées peuvent passer par le gris en se fondant.
- Un texte sur un dégradé animé doit rester lisible à chaque instant de la boucle, y compris aux images les plus claires et les plus sombres.
- Pour les réseaux et la vidéo, exportez les dégradés animés en boucles parfaites au format MP4, avec une image fixe pour les endroits qui ne lisent pas la vidéo.

Un **arrière-plan dégradé animé** est un fondu de couleurs qui bouge : il dérive dans le cadre, change de forme, glisse de teinte ou s’éclaire et s’assombrit, en général en boucle derrière des mots ou un produit. Les meilleurs ressemblent à de la lumière qui traverse une matière. Les plus faibles ressemblent à un économiseur d’écran. Ce qui les sépare n’est pas le logiciel, mais quelques choix sur ce qui bouge, à quelle vitesse et dans quelles couleurs.

Ce guide traite du côté design, pour la vidéo, les posts et les écrans. Si vous en construisez un en code pour un site web, voyez les [dégradés animés en CSS](https://gradiently.design/fr/guide/css-animated-gradient) et les [dégradés shader](https://gradiently.design/fr/guide/shader-gradients).

## Ce qui peut bouger dans un dégradé animé

Tout dégradé animé est une combinaison de cinq types de changement. La plupart des bons en utilisent un, parfois deux. Tout employer à la fois est le moyen le plus rapide de rendre un fond agité.

| Ce qui bouge | Ce que l’on voit | Effet |
| --- | --- | --- |
| La position | Tout le champ glisse ou dérive | Calme, spacieux, cinématographique |
| La forme | Des nappes de couleur gonflent, se plient ou se fondent l’une dans l’autre | Organique, liquide |
| La teinte | Les couleurs penchent d’un côté puis reviennent, ou font le tour du cercle | Saisonnier, ludique, énergique quand c’est rapide |
| La lumière | La luminosité respire | Discret, luxueux |
| Le grain et les particules | Une texture fine scintille ou dérive sur la couleur | Tactile, cinématographique, atmosphérique |

Choisissez un mouvement principal. Un second, bien plus subtil, peut le soutenir.

## À quelle vitesse un dégradé animé doit bouger

La vitesse décide de l’essentiel de l’ambiance. Un mouvement lent paraît haut de gamme et assuré ; un mouvement rapide paraît urgent. Pour un fond derrière des mots, un cycle complet de changement doit en général durer plusieurs secondes, pas une ou deux. Si vous suivez nettement le mouvement en lisant le titre, il est probablement trop rapide.

- 0 s : crépuscule: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`
- 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)`
- 6 s : le plus chaud: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)`
- 12 s : retour au crépuscule: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`

Quatre instants d’un même glissement lent de couleur. La dernière image reprend la première : la boucle peut donc se répéter sans à-coup.

Le mouvement doit aussi s’adoucir plutôt que d’avancer à vitesse constante. Des changements qui démarrent et finissent en douceur paraissent naturels ; une vitesse constante paraît mécanique. L’[accélération et décélération](https://gradiently.design/fr/guide/easing) explique pourquoi, avec des exemples.

## Les couleurs qui s’animent bien

L’animation vous montre chaque couleur intermédiaire d’un dégradé, l’une après l’autre. Un dégradé fixe peut cacher un point médian terne dans une bande étroite ; un dégradé animé s’y attarde. Les palettes les plus sûres sont **analogues** : des voisines sur le cercle chromatique, comme indigo, violet et rose, ou turquoise, vert et lime. Leurs couleurs intermédiaires restent vives.

- Du bleu à l’orange : milieu gris: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Par le magenta : reste vif: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Du turquoise au lime : voisines: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)`

Des couleurs opposées fondues directement passent par un gris terne. Un point intermédiaire, ou des teintes voisines, gardent la couleur vivante pendant le mouvement.

Si vous avez besoin de couleurs opposées, faites-les passer par une couleur de liaison, comme dans l’exemple du milieu, ou lisez [pourquoi les dégradés grisent au milieu](https://gradiently.design/fr/guide/muddy-gradients). Gardez une couleur comme fond qui ne change presque pas, en général la plus sombre. Elle ancre le mouvement et donne aux mots une place stable.

## Garder le texte lisible sur un dégradé en mouvement

Un texte sur un dégradé fixe n’a qu’à se lire sur un seul arrière-plan. Sur un dégradé animé, il doit se lire sur chaque image de la boucle. L’échec classique est un titre parfaitement clair au début qui disparaît pendant deux secondes quand une nappe de couleur vive dérive derrière lui.

### À éviter

- Vérifier le contraste sur la première image seulement
- Des nappes de couleur vive qui dérivent à travers les mots
- Déplacer le texte en même temps que l’arrière-plan
- De grands cycles de teinte derrière un texte de taille courante

### À faire

- Parcourir la boucle et vérifier les moments les plus clairs et les plus sombres
- Garder la partie la plus calme du champ derrière les mots
- Garder les mots immobiles et laisser la couleur bouger
- Réserver les forts changements de couleur aux fonds avec des titres courts

Certains outils aident ici. Dans Gradiently, le Mark derrière un design sait où sont les mots, et sa zone la plus calme et la mieux contrastée reste derrière eux pendant qu’il bouge. Pour les principes généraux, voyez [comment poser du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient).

## Comment concevoir un dégradé animé, étape par étape

1. **Concevez l’image fixe** Choisissez le fond, trois à cinq couleurs et la disposition des mots. Elle doit fonctionner en image fixe avant de bouger.
2. **Choisissez un mouvement principal** Dérive, flux, glissement de teinte ou lumière qui respire. Accordez-le à la marque : les marques calmes dérivent, les marques vives peuvent fluer ou tourbillonner.
3. **Fixez un rythme lent** Partez plus lentement que ce qui paraît naturel et n’accélérez que si le mouvement est difficile à remarquer.
4. **Faites-en une boucle** La dernière image doit ramener à la première. Les [boucles parfaites](https://gradiently.design/fr/guide/seamless-loop-video) expliquent comment.
5. **Vérifiez chaque instant** Parcourez la boucle et faites une pause aux points les plus clairs et les plus sombres pour vérifier les mots.
6. **Exportez pour l’endroit où il sera lu** MP4 pour les réseaux et les sites, GIF seulement pour l’e-mail, et une image PNG fixe pour tout le reste. [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-mp4) explique le choix.

Une story verticale annonçant des ouvertures tardives tout l’hiver sur un dégradé en mouvement

Une story verticale est le foyer naturel d’un dégradé animé : quelques mots tenus immobiles, la couleur qui bouge derrière.

## Où les arrière-plans dégradés animés fonctionnent le mieux

- **Stories et Reels**, où la vidéo est attendue. Gardez les mots dans les zones de sécurité ; voyez les [arrière-plans pour Reels et TikTok](https://gradiently.design/fr/guide/reels-tiktok-backgrounds).
- **Posts du fil** pour des annonces et des offres, où le mouvement distingue le post.
- **Bandeaux de sites web**, en courte vidéo muette ou en arrière-plan animé, avec une image fixe de secours. Les [arrière-plans vidéo sur les sites web](https://gradiently.design/fr/guide/video-background-website) détaillent le sujet.
- **Écrans de scène et de boutique**, où de longues boucles lentes tournent pendant des heures.
- **Intros et outros vidéo**, comme champ discret derrière un titre.

Avec Gradiently, chaque design peut être exporté en boucle de 5 à 30 secondes : choisissez un mouvement comme Dérive, Flux, Respiration ou Tourbillon, un rythme, le comportement de la couleur et si des particules dérivent dessus. La boucle est faite pour que sa fin rejoigne son début.

## FAQ

### Qu’est-ce qu’un arrière-plan dégradé animé ?

Un fondu de couleurs qui bouge dans le temps, en dérivant, en fluant, en changeant de teinte ou en faisant respirer la lumière, en général en boucle derrière des mots, des produits ou de la vidéo.

### À quelle vitesse un dégradé animé doit-il bouger ?

Lentement, pour la plupart des arrière-plans. Un cycle complet de changement doit durer plusieurs secondes, et vous ne devriez pas pouvoir suivre confortablement le mouvement en lisant le titre.

### Quelles couleurs conviennent le mieux à un dégradé animé ?

Les teintes voisines, comme indigo, violet et rose, s’animent le plus proprement. Les couleurs opposées ont besoin d’une couleur de liaison, sinon elles passent par le gris.

### Comment garder un texte lisible sur un dégradé animé ?

Vérifiez les mots aux moments les plus clairs et les plus sombres de la boucle, gardez la partie la plus calme du champ derrière eux et gardez le texte immobile.

### Dans quel format exporter un dégradé animé ?

MP4 pour les réseaux sociaux et les sites web. N’utilisez le GIF que là où la vidéo ne se lit pas, comme l’e-mail, et gardez un PNG fixe en secours.