Générateur d’arrière-plans dégradés animés CSS

Créez en ligne des arrière-plans dégradés animés, avec plusieurs couleurs, directions d’animation et préréglages, et générez le code CSS en un clic

Signaler un bug

Mode d’exécution du navigateur: Vos données sont traitées dans votre navigateur et ne sont pas envoyées au serveur.

Vitesse et stabilité: La vitesse de traitement dépend de votre appareil et de votre navigateur. Pour les gros lots, la version de bureau peut être plus stable.

Chargement de l’outil, veuillez patienter...

Si l’outil en ligne ne se charge pas ou ne fonctionne pas, essayez l’outil de bureau. https://tools.yikeaigc.com/

Utilisation de l’outil

Retour à l’ancienne version

Choisissez d’abord une palette, ajustez l’animation, puis copiez ou téléchargez le code. Les préréglages peuvent servir d’exemples ou être modifiés : couleurs, arrêts, direction, vitesse et usage de sortie. Tous les aperçus, générations et réglages sont faits sur cette page.

Aperçu en direct CSS Keyframes Texte / Bordure / Fond Paramètres enregistrables

Nombre de couleurs-

Type d’animation-

Durée-

Usage de sortie-

Réglages des couleurs

Commencer avec un exemple est plus rapide. Les arrêts de couleur influencent le rythme de transition du dégradé ; gardez 2 à 6 couleurs.

Modèles d’exemple Le clic remplacera les couleurs actuelles

Base du dégradé Linéaire pour les fonds web, radial pour les effets de projecteur, conique pour les bordures ou badges

Type de dégradé

Angle du dégradé135°

135°

Centre radial / conique

Arrêts de couleur Conserver 2 couleurs, jusqu’à 8 couleurs

Paramètres d’animation

Une vitesse lente est recommandée pour un arrière-plan. Pour atténuer l’effet, activez la compatibilité avec la réduction des animations.

Type d’animation Choisir une logique Keyframes différente

Direction du mouvement Affecte les images clés de background-position

Vitesse et boucle Plus la taille de fond est grande, plus le mouvement des couleurs est visible

Durée de l’animation10s

10s

Taille de l’arrière-plan400%

400%

Courbe d’animation

Boucle infinie Lecture en aller-retour Pause au survol Compatibilité réduction des animations

Générer et exporter

Définissez le nom de classe et le cas d’usage, copiez le CSS dans la feuille de style du projet, puis ajoutez la classe aux éléments cibles.

Paramètres d’application Une même palette peut créer des effets de fond, de texte ou de bordure

Nom de classe CSS

Usage de sortie

Hauteur min. du conteneur (px)

Arrondi (px)

Largeur de bordure (px)

Fond interne de bordure

Code CSS généré

Exemple HTML

Aperçu en direct

Animated Gradient Après ajustement des couleurs, de la direction et de la vitesse, l’effet se met à jour instantanément. Idéal pour les héros, zones de boutons, pages promo et cartes visuelles. CSS Ready

Type de dégradé-

Orientation-

Taille-

Nom de classe-

Instructions

Instructions d’utilisation du logiciel

Choisir une palette de couleurs : dans « Paramètres de couleurs », cliquez sur un modèle d’exemple, ou ajoutez, supprimez et ajustez manuellement les couleurs et les points d’arrêt.
Définir le type de dégradé : choisissez un dégradé linéaire, radial ou conique, puis ajustez l’angle et la position du centre selon vos besoins.
Configurer les paramètres d’animation : dans « Paramètres d’animation », définissez le mode de flux, la direction du mouvement, la durée, la taille de l’arrière-plan, la courbe d’animation et le mode de boucle.
Choisir l’usage de sortie : dans « Générer et exporter », choisissez un conteneur d’arrière-plan, un texte en dégradé ou une bordure en dégradé, puis définissez le nom de classe CSS, les coins arrondis, la bordure et d’autres paramètres.
Prévisualiser l’effet : à droite, vous pouvez basculer entre les modes de prévisualisation arrière-plan, carte, texte et bordure, puis générer le code après avoir confirmé le résultat.
Copier ou télécharger le code : cliquez sur « Copier le CSS », « Copier le HTML » ou « Télécharger le CSS » pour appliquer le code aux éléments de la page.
Enregistrer les paramètres : cliquez sur « Enregistrer les paramètres » pour conserver les paramètres actuels et poursuivre facilement l’édition la prochaine fois.

Questions fréquentes

R : Copiez le code CSS dans votre fichier de styles, puis ajoutez le nom de classe indiqué dans l’exemple HTML à l’élément sur lequel vous souhaitez afficher le dégradé.

R : Le dégradé linéaire convient aux arrière-plans de page et aux bannières ; le dégradé radial est adapté aux effets de projecteur et de diffusion douce ; le dégradé conique convient aux bordures, aux badges et aux effets visuels de rotation.

R : Vous pouvez augmenter la taille de l’arrière-plan, ajouter davantage de couleurs, ajuster les points d’arrêt des couleurs, ou choisir des modes d’animation comme le flux diagonal ou le flux respirant.

R : Oui. Dans l’usage de sortie, choisissez « Texte en dégradé » ; l’outil générera un code CSS contenant background-clip:text.

Réponse : Les arrière-plans de page classiques peuvent généralement être utilisés sans problème. Si la page contient beaucoup d’animations, il est recommandé d’allonger la durée des animations, de réduire le nombre de couleurs et d’activer le code de compatibilité pour la réduction des effets dynamiques.