Créez des dégradés CSS linéaires, radiaux et coniques avec des points de couleur en direct, et copiez le code, directement dans votre navigateur.
Générateur de Dégradé CSS en Ligne
Créez des dégradés CSS linéaires, radiaux et coniques avec des points de couleur en direct, et copiez le code, directement dans votre navigateur.
Le Générateur de Dégradé CSS s'exécute entièrement dans votre navigateur. Les couleurs et réglages de dégradé que vous concevez ne sont jamais envoyés à ArrayKit.
Le Générateur de Dégradé CSS conçoit des dégradés linéaires, radiaux et coniques de façon visuelle, pour que vous n'ayez plus jamais à régler une valeur background-image à la main. Choisissez un type de dégradé, faites glisser le curseur d'angle ou la position centrale, puis ajoutez, supprimez ou recolorez autant de points de couleur que nécessaire avec des sélecteurs de couleur natifs et des positions en pourcentage précises. Un panneau d'aperçu en direct se met à jour instantanément pendant que vous modifiez, et l'outil génère une déclaration `background: ...;` prête à copier, à coller directement dans une feuille de style. Il est conçu pour les développeurs front-end et les designers qui veulent prototyper le fond d'une bannière, d'un bouton ou d'une carte sans ouvrir d'application de design. Tout s'exécute localement dans votre navigateur, donc les dégradés que vous créez ne sont jamais envoyés où que ce soit.
Fonctionnalités
Types de dégradé linéaire, radial et conique dans un seul outil
Points de couleur illimités, chacun avec un sélecteur de couleur natif et une position en pourcentage
Ajoutez ou supprimez des points instantanément avec les boutons d'ajout et de suppression
Curseur d'angle et saisie numérique pour les dégradés linéaires et coniques
Bascule cercle/ellipse avec position centrale déplaçable pour les dégradés radiaux
Le panneau d'aperçu en direct se met à jour à chaque réglage
Génère une déclaration CSS `background: ...;` prête à copier
S'exécute entièrement dans votre navigateur, sans rien envoyer
Comment utiliser Générateur de Dégradé CSS
Choisissez Linéaire, Radial ou Conique comme type de dégradé
Réglez l'angle (linéaire/conique) ou la forme et la position centrale (radial)
Ajoutez des points de couleur et ajustez la couleur et la position en pourcentage de chacun
Copiez le CSS background généré depuis le panneau de code
Un dégradé linéaire à deux points, du rouge au bleu, avec un angle de 90 degrés.
Erreurs courantes et dépannage
Le dégradé paraît plat ou n'affiche qu'une seule couleur. — Ajoutez au moins deux points de couleur avec des positions différentes — un seul point, ou deux à la même position, ne produisent aucune transition visible.
Un dégradé radial s'affiche comme un ovale au lieu d'un cercle. — Basculez la forme sur Cercle, ou laissez sur Ellipse si vous voulez que le dégradé s'adapte au rapport largeur/hauteur de l'élément.
Le dégradé conique démarre au mauvais endroit. — Ajustez la valeur de l'angle — les dégradés coniques font pivoter leur point de départ dans le sens horaire à partir de l'angle choisi, en commençant à 0deg vers le haut.
Les couleurs présentent des bandes ou paraissent troubles entre les points. — Ajoutez un point de couleur intermédiaire près du point de transition plutôt que de laisser le navigateur interpoler deux teintes très différentes sur un large intervalle.
Foire aux questions
Qu'est-ce que le Générateur de Dégradé CSS ?
C'est un outil visuel pour créer des dégradés CSS linéaires, radiaux et coniques à partir de points de couleur, avec un aperçu en direct et une déclaration background prête à copier — sans écrire la syntaxe du dégradé à la main.
Le Générateur de Dégradé CSS peut-il créer des dégradés radiaux et coniques, pas seulement linéaires ?
Oui. Basculez le contrôle segmenté sur Radial pour un dégradé circulaire ou elliptique avec un centre déplaçable, ou sur Conique pour un dégradé qui balaie autour d'un centre depuis un angle de départ choisi.
Combien de points de couleur puis-je ajouter dans le générateur de dégradé ?
Autant que vous voulez. Utilisez le bouton Ajouter un point pour en ajouter un nouveau et le bouton de suppression sur chaque ligne pour le retirer, tant qu'il reste au moins un point.
Le Générateur de Dégradé CSS envoie-t-il mes couleurs quelque part ?
Non. Le Générateur de Dégradé CSS s'exécute entièrement dans votre navigateur. Les couleurs, positions et dégradés que vous concevez ne quittent jamais votre appareil.
Quel CSS le générateur de dégradé produit-il ?
Une seule déclaration background, comme background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, prête à coller dans une feuille de style, un attribut style ou un template CSS-in-JS.
Puis-je définir une position exacte pour le centre d'un dégradé radial ou conique ?
Oui. Les curseurs Centre X et Centre Y vous permettent de déplacer l'origine du dégradé entre 0% et 100% de l'élément dans chaque direction.