Convertisseur Gratuit

Générateur de Dégradés CSS

Générez visuellement des dégradés CSS avec un aperçu en direct. Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur personnalisés — gratuit et côté client.

Aperçu en Direct
Sortie CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Angle (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

À propos de cet outil

Créez de superbes dégradés CSS linéaires et radiaux avec un éditeur visuel. Choisissez des couleurs, ajustez les arrêts, changez de direction ou d'angle et consultez la mise à jour de l'aperçu en direct en temps réel. Copiez le code CSS généré (y compris les préfixes des fournisseurs pour les anciens navigateurs) et collez-le directement dans votre feuille de style.

Comment l'utiliser

  1. Choisissez le type de dégradé : linéaire ou radial.
  2. Ajoutez des arrêts de couleur en cliquant sur la barre de dégradé et en sélectionnant les couleurs.
  3. Ajustez l’angle du dégradé (linéaire) ou la position (radiale) à l’aide des commandes.
  4. Copiez le code CSS généré à partir du panneau de sortie.

Questions fréquentes

Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Les dégradés CSS modernes (dégradé linéaire, dégradé radial) sont pris en charge dans tous les navigateurs actuels, notamment Chrome, Firefox, Safari et Edge. L'outil peut éventuellement générer des préfixes -webkit- pour les anciennes versions du navigateur.
Puis-je créer des dégradés multicolores ?
Oui. Ajoutez autant d’arrêts de couleur que nécessaire. Vous pouvez également ajuster la position de chaque arrêt pour contrôler où les couleurs se mélangent. Cela permet des dégradés complexes d’arc-en-ciel, de coucher de soleil ou de marque personnalisée.
Quelle est la différence entre les dégradés linéaires et radiaux ?
Les dégradés linéaires font passer les couleurs le long d'une ligne droite (de haut en bas, de gauche à droite, en diagonale ou sous n'importe quel angle). Les dégradés radiaux font passer les couleurs vers l'extérieur à partir d'un point central dans une forme circulaire ou elliptique.
Puis-je utiliser le dégradé comme arrière-plan pour le texte ?
Oui. Utilisez background-clip: text avec -webkit-text-fill-color: transparent pour appliquer le dégradé au texte. Le CSS généré fournit la définition du dégradé — combinez-le avec ces propriétés pour le texte dégradé.