Générateur de dégradés coniques CSS Créez des dégradés coniques CSS pour les diagrammes circulaires, les roues de couleurs et les effets balayés.
Générateur de dégradés coniques
Créez des dégradés coniques CSS pour les diagrammes circulaires, les roues de couleurs et les effets balayés.
Sélectionner les couleurs
Choisissez trois couleurs pour le dégradé conique.
Ajuster les paramètres
Définissez l'angle de départ et la position du centre.
Copier le CSS
Copiez le code CSS généré pour le dégradé conique.
What Is Générateur de dégradés coniques?
Un générateur de dégradés coniques crée des dégradés CSS qui tournent autour d'un point central, en faisant la transition entre les couleurs de manière angulaire plutôt que linéaire ou radiale. Les dégradés coniques tournent autour d'un point central, ce qui les rend parfaits pour créer des roues de couleurs, des segments de graphique circulaire, des cadrans d'horloge et des transitions de couleur fluides. Cet outil vous permet de choisir trois couleurs, de définir l'angle de départ et de positionner le point central. Le code CSS conic-gradient() résultant crée des transitions angulaires fluides qui reviennent à la couleur de départ. Les dégradés coniques sont une fonctionnalité puissante du CSS qui permet des effets visuels qui nécessiteraient autrement SVG ou Canvas, en gardant vos designs en pur CSS et accélérés par le GPU.
Why Use Générateur de dégradés coniques?
-
Créez des transitions de couleurs angulaires impossibles avec les dégradés linéaires ou radiaux
-
Angle de départ ajustable pour contrôler la rotation
-
Position du centre personnalisable pour des effets décalés
-
Parfait pour les arrières-plans décoratifs et les visualisations de données
-
Sortie CSS propre pour une utilisation en production
Common Use Cases
Roues de couleurs
Créez des arrières-plans de roue de couleurs arc-en-ciel à l'aide de dégradés coniques.
Graphiques circulaires
Concevez des graphiques circulaires simples en CSS uniquement avec des arrêts de couleur rigides.
Arrières-plans décoratifs
Créez des arrières-plans de dégradé angulaire uniques pour les sections et les cartes.
Indicateurs de chargement
Concevez des indicateurs de chargement en CSS uniquement avec des arcs de dégradé conique.
Technical Guide
Le CSS conic-gradient() crée des transitions de couleur autour d'un point central. La syntaxe est : conic-gradient(from angle at posX posY, color1, color2, ..., color1). L'angle « from » fait pivoter la position de départ (par défaut 0deg = haut). Les couleurs sont réparties uniformément sur les 360° de rotation sauf si des arrêts d'angle explicites sont spécifiés. La répétition de la première couleur comme dernière étape crée une boucle fluide. Pour les effets de graphique circulaire, utilisez des arrêts en pourcentage : conic-gradient(rouge 0% 25%, bleu 25% 50%, vert 50% 75%, jaune 75%). Les dégradés coniques sont pris en charge dans Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Ils peuvent être masqués avec border-radius: 50% et combinés avec mask-image pour des formes complexes.
Tips & Best Practices
-
1Répétez la première couleur comme dernière étape pour des transitions circulaires sans rupture
-
2Utilisez des arrêts rigides (même pourcentage, deux couleurs) pour les segments de graphiques circulaires
-
3Combinez avec border-radius: 50% pour des effets de roue de couleurs circulaire
-
4L'angle « from » fait pivoter l'ensemble du dégradé - utile pour les effets animés
-
5Superposez plusieurs dégradés coniques pour des motifs complexes
Related Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Roue de l'harmonie des couleurs
Roue de couleurs interactive avec cinq types d'harmonie et sélection visuelle.
🎨 Color Tools
Générateur de dégradés linéaires
Créez des dégradés linéaires CSS avec des couleurs personnalisées, un angle et des arrêts de couleur.
🎨 Color Tools
Générateur de dégradés radiaux
Créez des dégradés radiaux CSS avec une forme, une position et des couleurs personnalisées.
🎨 Color Tools
Générateur de filtres CSS
Appliquez des effets de filtre CSS tels que le flou, la luminosité, le contraste et bien plus encore avec des commandes visuelles.
🎨 CSS & DesignFrequently Asked Questions
Q Qu'est-ce qu'un dégradé conique ?
Q Puis-je créer des graphiques circulaires avec des dégradés coniques ?
Q Le dégradé conique est-il bien pris en charge ?
About This Tool
Générateur de dégradés coniques is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.