DÉVELOPPEURS · OUTIL

Générateur de dégradé CSS animé — Aperçu direct

Créez un dégradé CSS animé à trois couleurs. Réglez angle et durée, mettez en pause et exportez un CSS respectant la réduction des animations.

Générateur de dégradé CSS animé — Aperçu direct

OUTIL GRATUIT

Couleur 1#2563ebCouleur 2#7c3aedCouleur 3#06b6d4

Angle: 135°Durée du cycle: 10 s

L’aperçu et le CSS respectent la préférence de réduction des animations. Appliquez la classe animated-gradient à votre élément.

Code généré

.animated-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed, #06b6d4);
  background-size: 300% 300%;
  animation: toolnoza-gradient 10s ease infinite;
}
@keyframes toolnoza-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
}

EXEMPLE

Exemple d’utilisation

Un dégradé bleu, violet et cyan à 135° avec un cycle de 10 secondes crée un fond animé fluide.

POINT À VÉRIFIER

À savoir avant de commencer

L’animation déplace background-position, pas les couleurs elles-mêmes. La pause de l’aperçu ne modifie pas le code exporté.

Le dégradé nécessite-t-il JavaScript ?

Non : le code utilise des keyframes CSS et une requête média. L’élément doit avoir des dimensions ou du contenu pour afficher son fond.

Référence

MDN — CSS animations

Générateur de dégradé CSS animé — Aperçu direct

Générateur de dégradé CSS animé — Aperçu direct

Exemple d’utilisation

À savoir avant de commencer

Guides pratiques

Outils similaires

Le dégradé nécessite-t-il JavaScript ?

Référence