Générateur de Dégradés Coniques
Construisez visuellement des valeurs CSS conic-gradient() avec un aperçu interactif en camembert. Ajoutez jusqu'à 12 arrêts de couleur avec un contrôle précis de la position, définissez l'angle de départ et la position du centre, puis copiez le CSS instantanément. Choisissez parmi 6 préréglages (Arc-en-ciel, Coucher de soleil, Océan, Néon, Pastel, Feu) pour démarrer rapidement. Totalement privé, 100 % gratuit et sans inscription.
Presets
Preview
Color Stops (5)
background: conic-gradient(from 0deg at 50% 50%, #FF6B6B 0%, #FDCB6E 25%, #55EFC4 50%, #74B9FF 75%, #A29BFE 100%);
Pourquoi utiliser notre générateur de dégradés coniques ?
- Aperçu instantané du dégradé conique : le générateur met à jour l'aperçu en camembert et la barre de dégradé à chaque changement - sans bouton à presser. Ajustez n'importe quel arrêt de couleur, angle ou position et voyez le résultat immédiatement.
- Aperçu interactif en camembert : le camembert basé sur Canvas montre exactement comment votre dégradé conique sera rendu. Chaque arrêt de couleur correspond à une part, avec l'angle de départ clairement indiqué par une ligne pointillée. Une barre de dégradé linéaire en dessous offre une vue de référence supplémentaire.
- 100 % privé - aucun envoi : toute la génération de dégradés se fait localement dans votre navigateur. Vos valeurs de couleur ne quittent jamais votre appareil et ne sont jamais envoyées à un serveur.
- Gratuit et sans limites : générez des dégradés coniques illimités sans inscription, sans abonnement et sans plafond d'utilisation. Jusqu'à 12 arrêts de couleur par dégradé. Entièrement gratuit pour toujours.
Cas d'usage courants du générateur de dégradés coniques
- Arrière-plans CSS et éléments d'interface : les développeurs frontend utilisent le générateur pour créer des arrière-plans CSS accrocheurs, des bordures en dégradé et des spinners de chargement. Les dégradés coniques sont parfaits pour les éléments circulaires d'interface et les indicateurs de roue chromatique.
- Visualisation de données et graphiques : les designers de dataviz utilisent les dégradés coniques comme remplissages de graphiques en anneau, fonds de jauges et indicateurs de progression circulaires. L'aperçu en camembert permet de voir exactement comment le dégradé correspond aux données circulaires.
- Roues chromatiques et outils d'harmonie : les designers utilisent le générateur pour créer des roues chromatiques et des visualisations d'harmonie. La possibilité de définir des positions précises d'arrêts de couleur le rend idéal pour montrer les relations entre couleurs.
- Design de composants d'interface : les designers UI utilisent les dégradés coniques pour les boutons, cartes, avatars et fonds de badges nécessitant un effet de dégradé circulaire. Les contrôles de position du centre permettent un placement précis de l'origine.
- Design de marque et marketing : les designers de marque utilisent les dégradés coniques dans les sections hero, les traitements de logo et les supports marketing pour créer des effets visuels modernes et distinctifs qui se démarquent des dégradés linéaires.
- Expérimentation créative : les professionnels créatifs utilisent le générateur pour explorer de nouveaux effets visuels et découvrir des combinaisons inattendues. L'aperçu en temps réel rend l'expérimentation rapide et ludique.
Qu'est-ce qu'un dégradé conique ?
Un dégradé conique est un dégradé CSS qui fait transitionner les couleurs autour d'un point central sur 360 degrés - comme une roue chromatique ou un camembert. Contrairement aux dégradés linéaires (qui vont en ligne droite) ou radiaux (qui rayonnent vers l'extérieur en cercles), les dégradés coniques s'enroulent autour d'un point central, ce qui les rend idéaux pour les designs circulaires, les roues chromatiques et les effets de graphique en anneau. La fonction CSS est conic-gradient() et fait partie du CSS Images Module Level 4.
Comment fonctionne notre générateur de dégradés coniques
- Ajoutez des arrêts de couleur : commencez avec la palette par défaut de 5 couleurs ou cliquez sur un préréglage. Chaque arrêt de couleur possède un sélecteur de couleur, une saisie hexadécimale et un curseur de position (0-100 %) qui détermine où la couleur apparaît sur le cercle.
- Ajustez l'angle et la position : le contrôle d'angle de départ fait pivoter tout le dégradé (0-360°). Les contrôles de position du centre (X/Y) déplacent le point central du dégradé - 50 %/50 % le place au milieu, tandis que 0 %/0 % le place dans le coin supérieur gauche.
- Prévisualisez et copiez : le camembert Canvas rend votre dégradé en temps réel avec une ligne pointillée indiquant l'angle de départ. La sortie CSS se met à jour automatiquement. Cliquez sur « Copier le CSS » pour copier la déclaration background complète.
Dégradés coniques vs linéaires vs radiaux
- Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite (de haut en bas, de gauche à droite ou selon n'importe quel angle). Idéaux pour les arrière-plans, boutons et en-têtes nécessitant une transition directionnelle.
- Les dégradés radiaux font transitionner les couleurs vers l'extérieur depuis un point central, en cercles ou ellipses. Idéaux pour les effets de projecteur, les boutons lumineux et les ombrages naturels.
- Les dégradés coniques font transitionner les couleurs autour d'un point central en un balayage circulaire. Idéaux pour les roues chromatiques, graphiques en anneau, spinners de chargement, bordures en dégradé sur éléments circulaires et tout design nécessitant une transition circulaire de couleur.
- Quand choisir le conique : utilisez des dégradés coniques lorsque vous voulez que les couleurs entourent un cercle - ils ne peuvent pas être reproduits avec des dégradés linéaires ou radiaux. Ils sont particulièrement efficaces pour les éléments d'interface évoquant rotation, progression ou comportement cyclique.
Compatibilité navigateurs et bonnes pratiques
Les dégradés coniques CSS sont pris en charge par tous les navigateurs modernes - Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Pour les navigateurs plus anciens, les dégradés coniques se dégradent proprement : le navigateur affichera la couleur de fond de secours. Définissez toujours un background-color de secours avant votre déclaration de dégradé.
Astuce performance : les dégradés coniques sont accélérés par GPU et performants dans la plupart des cas. Évitez toutefois d'animer des dégradés coniques sur de grands éléments ou de les utiliser sur des éléments repeints fréquemment (comme des arrière-plans au défilement), car le calcul du dégradé peut impacter le taux de rafraîchissement.
Foire aux questions
Un générateur de dégradés coniques est un outil visuel qui vous aide à construire des valeurs CSS conic-gradient() sans écrire de code. Notre générateur propose un aperçu interactif en camembert, la gestion des arrêts de couleur avec sélecteurs de couleur, des contrôles d'angle de départ et de position du centre, des préréglages pour démarrer vite, et une copie du CSS en un clic pour un usage immédiat dans vos projets.
Ajoutez des arrêts de couleur avec le sélecteur de couleur ou la saisie hexadécimale, et ajustez leur position avec le curseur pour contrôler où chaque couleur apparaît sur le cercle. Utilisez le curseur d'angle de départ pour faire pivoter tout le dégradé. Ajustez Centre X et Centre Y pour repositionner l'origine du dégradé. L'aperçu en camembert se met à jour en temps réel. Cliquez sur « Copier le CSS » quand le résultat vous convient.
Les dégradés radiaux font transitionner les couleurs vers l'extérieur depuis un point central, en cercles, créant un effet de cible. Les dégradés coniques font transitionner les couleurs autour d'un point central en un balayage circulaire, créant un effet de camembert ou de roue chromatique. Les radiaux conviennent aux effets de projecteur, tandis que les coniques sont parfaits pour les roues chromatiques, les graphiques en anneau et les indicateurs de progression circulaires.
Vous pouvez ajouter jusqu'à 12 arrêts de couleur. Chaque arrêt dispose de son propre sélecteur de couleur et curseur de position. Un minimum de 2 arrêts est requis. Utilisez le bouton « Ajouter un arrêt » pour en ajouter et l'icône de corbeille pour supprimer ceux dont vous n'avez pas besoin.
L'angle de départ (0-360°) détermine où commence le premier arrêt de couleur sur le cercle. Par défaut, il commence à 0° (en haut). Une ligne pointillée sur l'aperçu en camembert indique la position de l'angle de départ. Faire pivoter l'angle de départ décale toutes les couleurs autour du cercle de la même quantité.
Centre X et Centre Y (0-100 %) contrôlent où l'origine du dégradé est placée dans l'élément. 50 %/50 % la place exactement au centre. 0 %/0 % la place dans le coin supérieur gauche. 100 %/100 % la place dans le coin inférieur droit. C'est le paramètre « at position » de la fonction CSS conic-gradient().
Oui. Le générateur de dégradés coniques est 100 % gratuit, sans inscription, sans fonctionnalité premium et sans limite d'utilisation. Générez des dégradés illimités sans restriction ni coût caché.
Les dégradés coniques CSS sont pris en charge par tous les navigateurs modernes : Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Pour les navigateurs plus anciens, définissez toujours un background-color de secours avant votre déclaration de dégradé afin que la page reste utilisable même sans prise en charge des dégradés.