Créateur de Dégradés.

Créez des dégradés CSS linéaires, radiaux ou coniques avec prévisualisation en direct. Ajustez les couleurs et la direction, puis copiez le CSS.

0%
100%

          
        

Choisissez un type de dégradé (linéaire, radial ou conique), ajoutez des points de couleur, ajustez leurs positions et voyez le résultat en direct. La propriété CSS background générée est prête à copier-coller directement dans votre projet. Ajoutez autant de points de couleur que nécessaire.

Comment utiliser

Sélectionnez un type de dégradé, ajustez l'angle (pour linéaire/conique), cliquez sur les échantillons de couleur pour les changer, et faites glisser les curseurs pour définir les positions des points. Cliquez sur + Ajouter une couleur pour plus de points. Copiez le CSS depuis le bloc de code sombre à droite.

Exemples

Linéaire coucher de soleil (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Éclat radial radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Roue de couleurs conique conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

Qu'est-ce qu'un dégradé conique ?

Un dégradé conique fait tourner les couleurs autour d'un point central. Il est utile pour les graphiques circulaires, les roues de couleurs, les effets de cadran et tout design où les couleurs transitent en arc plutôt qu'en ligne.

Combien de points de couleur puis-je ajouter ?

Autant que vous voulez — cliquez sur + Ajouter une couleur pour insérer des points supplémentaires. Le CSS est valide quel que soit le nombre de points utilisés.

Outils associés

Confidentialité et données

Cet outil fonctionne entièrement dans votre navegador. Rien de ce que vous tapez ou collez n'est envoyé à un serveur — tout le traitement se fait localement sur votre appareil.