Aller au contenu

Générateur de Dégradés

Créez de beaux dégradés CSS visuellement. Choisissez linéaire ou radial, ajoutez des arrêts de couleur, ajustez l'angle, aperçu et copiez le CSS.

Position: 0%
Position: 100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -o-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Générateur de Dégradés CSS : Créez de Beaux Dégradés Instantanément

Les dégradés CSS permettent d'afficher des transitions fluides entre deux couleurs ou plus sans fichiers image. Ils réduisent les requêtes HTTP, s'adaptent parfaitement à toute résolution et peuvent être modifiés avec une seule ligne de code. Notre générateur facilite la création de ces effets avec une interface visuelle et un aperçu en temps réel.

L'outil supporte les dégradés linéaires et radiaux. Les linéaires transitionnent les couleurs le long d'une ligne droite définie par un angle, tandis que les radiaux propagent les couleurs vers l'extérieur depuis un point central. Vous pouvez ajouter jusqu'à huit arrêts de couleur et ajuster l'angle de 0 à 360 degrés.

Une fois satisfait de l'aperçu, l'outil génère du code CSS propre prêt à coller dans votre feuille de style. Il fournit également des versions avec préfixes fournisseur pour une compatibilité maximale, incluant -webkit-, -moz- et -o-.

Les designers et développeurs utilisent couramment des fonds dégradés pour les sections hero, boutons, overlays de cartes et barres de navigation. En combinant plusieurs arrêts de couleur, vous pouvez créer des mélanges complexes qui ajoutent de la profondeur à toute page web.

FAQ

Partager
SponsoriséPublicité

Le design professionnel simplifié avec Canva

Créez des logos, publications sociales, présentations et plus avec un simple glisser-déposer.

FAQ

Quelle est la différence entre dégradé linéaire et radial ?+
Un dégradé linéaire transitionne les couleurs le long d'une ligne droite à un angle spécifié. Un radial les transitionne vers l'extérieur depuis un point central en forme circulaire. Les deux peuvent avoir plusieurs arrêts de couleur.
Combien d'arrêts de couleur puis-je ajouter ?+
Vous pouvez ajouter jusqu'à 8 arrêts. CSS n'a pas de limite stricte, mais 8 arrêts offrent suffisamment de flexibilité pour des effets complexes.
Ai-je encore besoin des préfixes fournisseur ?+
Les navigateurs modernes supportent la syntaxe standard sans préfixes. Cependant, pour les navigateurs plus anciens, la version préfixée assure la compatibilité. L'outil fournit les deux options.
Puis-je utiliser le CSS généré dans n'importe quel framework ?+
Oui. Le résultat est du CSS standard qui fonctionne en HTML, React, Vue, Angular ou tout autre framework.
L'aperçu correspond-il exactement à ce que je verrai sur mon site ?+
Oui. L'aperçu utilise exactement le même CSS généré, donc ce que vous voyez est précisément ce qui sera rendu dans tout navigateur moderne.

Outils les plus populaires