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.
Ouvrir le Convertisseur de Couleurs CSS
À propos de Générateur de Dégradé CSS
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
Exemple
Entrée
linear, 90deg, red -> blue
Sortie
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
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.
Outils associés
- Convertisseur de couleurs CSS — Convertit entre HEX, RGB et HSL avec un échantillon en direct.
- Convertisseur de format de couleur — Convertit toute couleur CSS en HEX, RGB, HSL, HWB, LAB, LCH, OKLCH et OKLAB en une fois, localement.
- Générateur de couleurs Tailwind — Transforme une couleur de marque en échelle Tailwind 50-950 en OKLCH avec contraste WCAG par nuance.
- Générateur CSS Grid — Construit une grille CSS visuellement et copie le grid-template avec les placements, dans votre navigateur.
- Générateur cubic-bezier — Façonne une courbe d’accélération CSS cubic-bezier() en faisant glisser deux points, avec aperçu en direct.
- Générateur de Box Shadow CSS — Créez des ombres CSS en couches avec aperçu en direct
Tous les outils ArrayKit