Dégradés coniques CSS
Dégradés coniques CSS
Un dégradé conique est un dégradé avec des transitions de couleur tournées 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, l'angle est de 0 degré et la position est le centre.
Si aucun degré n'est spécifié, les couleurs seront réparties uniformément autour du point central.
Dégradé conique : trois couleurs
L'exemple suivant montre 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 montre 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 à secteurs
Ajoutez simplement border-radius: 50%pour que le dégradé conique ressemble à une tarte :
Exemple
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Voici un autre graphique circulaire 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 depuis spécifié
Le [from angle ] spécifie un angle de rotation de l'ensemble du dégradé conique.
L'exemple suivant montre un dégradé conique avec un angle de 90 degrés :
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 une 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);
}
Répétition d'un dégradé conique
La repeating-conic-gradient()fonction est utilisée pour répéter les 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éparts et des arrêts de couleur définis :
Exemple
Un dégradé conique répétitif avec des départs 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 :
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |