Skip to main content

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 illustration
🎨

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.

1

Sélectionner les couleurs

Choisissez trois couleurs pour le dégradé conique.

2

Ajuster les paramètres

Définissez l'angle de départ et la position du centre.

3

Copier le CSS

Copiez le code CSS généré pour le dégradé conique.

Loading tool...

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

  • 1
    Répétez la première couleur comme dernière étape pour des transitions circulaires sans rupture
  • 2
    Utilisez des arrêts rigides (même pourcentage, deux couleurs) pour les segments de graphiques circulaires
  • 3
    Combinez avec border-radius: 50% pour des effets de roue de couleurs circulaire
  • 4
    L'angle « from » fait pivoter l'ensemble du dégradé - utile pour les effets animés
  • 5
    Superposez plusieurs dégradés coniques pour des motifs complexes

Related Tools

Frequently Asked Questions

Q Qu'est-ce qu'un dégradé conique ?
Un dégradé conique fait transitionner entre les couleurs autour d'un point central, en balayant de manière angulaire comme une aiguille d'horloge. Il diffère des dégradés linéaires (ligne droite) et radiaux (vers l'extérieur à partir du centre).
Q Puis-je créer des graphiques circulaires avec des dégradés coniques ?
Oui ! Utilisez des arrêts de couleur rigides (deux couleurs au même pourcentage) pour créer des segments nets. Par exemple : conic-gradient(rouge 0% 30%, bleu 30% 70%, vert 70%).
Q Le dégradé conique est-il bien pris en charge ?
Il est pris en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Il s'agit d'une fonctionnalité CSS Images Level 4 avec une adoption large depuis 2020.

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.