Fonction CSS conic-gradient()
Exemple
Un dégradé conique avec trois couleurs :
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La fonction conic-gradient() définit un dégradé conique comme image d'arrière-plan.
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 arrêts de couleur.
Exemple de dégradé conique :
| Version: | CSS3 |
|---|
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la fonction.
| Function | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
Syntaxe CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| Value | Description |
|---|---|
| from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
| at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
| color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
Plus d'exemples
Exemple
Un dégradé conique avec cinq couleurs :
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
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)
}
Exemple
Faites en sorte que le dégradé conique ressemble à une tarte en ajoutant border-radius: 50% :
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Exemple
Un dégradé conique avec un angle de départ :
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Exemple
Un dégradé conique avec une position à :
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Exemple
Un dégradé conique avec à la fois depuis l'angle et depuis la position :
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Exemple
Un autre camembert :
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Pages connexes
Tutoriel CSS : Dégradés CSS