CSS Dégradés Coniques
Fonction CSS conic-gradient()
La fonction CSS conic-gradient() permet de créer un dégradé conique.
Un dégradé conique est un dégradé dont les transitions de couleur tournent autour d'un point central.
Pour créer un dégradé conique, vous devez définir au moins deux couleurs.
Syntaxe
background-image: conic-gradient([from angle ] [at position ,] color [ degree ] , color [ degree ] , ... ); Par défaut, angle est 0deg et position est le centre.
Si aucun degree n'est spécifié, les couleurs seront réparties également autour du point central.
Dégradé Conique : Trois Couleurs
L'exemple suivant illustre un dégradé conique avec trois couleurs :
Exemple
Un dégradé conique avec trois couleurs :
#grad {
background-image: conic-gradient(red, yellow, green);
} Dégradé Conique : Cinq Couleurs
L'exemple suivant illustre un dégradé conique avec cinq couleurs :
Exemple
Un dégradé conique avec cinq couleurs :
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
} Dégradé Conique : Trois Couleurs et Degrés
L'exemple suivant montre un dégradé conique avec trois couleurs et un degré pour chaque couleur :
Exemple
Un dégradé conique avec trois couleurs et un degré pour chaque couleur :
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
} Créer des Graphiques en Secteurs
Il suffit d'ajouter border-radius: 50% pour que le dégradé conique ressemble à un graphique en secteurs :
Exemple
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
} Voici un autre graphique en secteurs avec des degrés définis pour toutes les couleurs :
Exemple
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
} Dégradé Conique Avec Angle Spécifié
Le [from angle ] spécifie un angle par lequel l'ensemble du dégradé conique est tourné.
L'exemple suivant montre un dégradé conique avec un angle de départ de 90deg :
Exemple
Un dégradé conique avec un angle de départ :
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
} Dégradé Conique Avec Position Centrale Spécifiée
Le [at position ] spécifie le centre du dégradé conique.
L'exemple suivant montre un dégradé conique avec une position centrale de 60% 45% :
Exemple
Un dégradé conique avec une position centrale spécifiée :
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
} Fonction CSS repeating-conic-gradient()
La fonction CSS repeating-conic-gradient() est utilisée pour répéter des dégradés coniques :
Exemple
Un dégradé conique répétitif :
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
} Voici un dégradé conique répétitif avec des débuts de couleur et des arrêts de couleur définis :
Exemple
Un dégradé conique répétitif avec des débuts de couleur et des arrêts de couleur définis :
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
} Fonctions de Dégradé CSS
Le tableau suivant répertorie les fonctions de dégradé CSS :
| Fonction | Description |
|---|---|
| conic-gradient() | Crée un dégradé conique. Définissez au moins deux couleurs (autour d'un point central) |
| linear-gradient() | Crée un dégradé linéaire. Définissez au moins deux couleurs (de haut en bas) |
| radial-gradient() | Crée un dégradé radial. Définissez au moins deux couleurs (du centre vers les bords) |
| repeating-conic-gradient() | Répète un dégradé conique |
| repeating-linear-gradient() | Répète un dégradé linéaire |
| repeating-radial-gradient() | Répète un dégradé radial |