Twitter
Partagez cette démonstration : Twitter

Les dégradés coniques (conic-gradient) en CSS

Dernière mise à jour : juin 2022

Introduction :

Vous connaissez en tant que développeur CSS les dégradés linéaires et radiaux, qui permettent de se passer d'images, signifiant gain de performance tant au niveau de la rapidité d'exécution que dans le poids d'une page web.

Cependant, il n'existait jusqu'à présent que ces deux types de dégradés, ce qui limitait un peu la créativité. C'est ainsi que sont apparus les dégradés coniques dans le quatrième niveau du module CSS Image Values and Replaced Content . On parle de dégradé conique car, vu du dessus, la répartition des couleurs fait tout simplement apparaître un cône.

Vous pouvez d'ores et déjà utiliser cette nouvelle fonctionnalité puisqu'il existe un polyfill réalisé par Lea Verou , en attendant le support complet des navigateurs.


La fonction CSS conic-gradient()

Similaire à un dégradé radial, le dégradé conique est circulaire et utilise le centre de l'élément comme point source des arrêts de couleur. La différence majeure réside dans le fait que ces arrêts de couleurs se propagent à partir du centre pour le dégradé radial tandis qu'ils se placent autour du cercle concernant le dégradé conique.

Autrement dit, avec les dégradés coniques, les arrêts de couleur commencent depuis la direction pointant vers le haut puis effectuent une rotation dans le sens des aiguilles d'une montre. Pour ce qui est du dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.

dégradé conique vs dégradé radial

Tout comme les autres dégradés, les dégradés coniques ne possèdent pas de dimension prédéfinie. En effet, la taille réelle du dégradé va dépendre de la taille de l'élément ou de l'image.

Pour réaliser un dégradé conique, nous allons utiliser la fonction conic-gradient(). Voici un exemple simple, suivi du code correspondant :

exemple conic gradient


background: conic-gradient(red, gold); 




Les mots-clés from et at :

Par défaut, si aucun angle n'est déclaré pour les couleurs, le dégradé est alors divisé de manière égale entre les couleurs, qui commence à 0 degré pour se terminer à 360 degrés. Néanmoins, il est possible de changer l'angle d'un dégradé conique.

C'est ainsi que l'on va utiliser le mot-clé from. Dans l'exemple ci-dessous, nous allons changer l'angle de rotation de 45 degrés :

exemple conic gradient from

Voici le code correspondant :



background: conic-gradient(from 45deg, red, gold); 



Nous pouvons aller encore plus loin en utilisant le mot-clé at pour définir la position de l'angle. Par défaut, il s'agit du centre (center).

exemple conic gradient at


background: conic-gradient(at 25% 50%, red, gold); 



Utilisons maintenant les deux mots-clé ensemble, ce qui va nous permettre de changer et la position de l'angle et l'angle de rotation :

exemple conic gradient at from


background: conic-gradient(from 45deg at 25% 50%, red,gold); 



Le polyfill ne permet pas d'utiliser les deux mots-clés. Mais cela fonctionne sur les navigateurs supportant les dégradés coniques (sans polyfill donc).


Points d'arrêts de couleur :

Nous avons pu voir des exemples simples avec deux couleurs (nécessaires pour réaliser n'importe quel type de dégradé), mais vous pouvez déclarer de nombreux arrêts de couleurs.

exemple conic gradient points arrêts couleurs


background: conic-gradient(red,gold,magenta,blue); 



Contrairement aux dégradés radiaux et linéaires où les points d'arrêt de couleur sont exprimés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à partir d'un angle.

Il existe plusieurs unités pour les angles :

  • -deg : pour les degrés
  • -rad : pour les radians
  • -grad : pour les grades
  • -turn : pour les tours

Les points d'arrêts de couleur vont nous permettre de créer des transtions douces ou brutales.

Ci-dessous une utilisation sans transition qui ressemble à un camembert :

exemple conic gradient camembert


background: conic-gradient(#0af 30%, gold 0 70%, red 0); 



Pour une transition en douceur, il suffira de reprendre la même couleur au début et à la fin du dégradé conique :

exemple conic gradient


.conique-doux {

background: conic-gradient(#0af, gold, red, #0af); 

}


Juste pour information, il est possible de reproduire un genre de dégradé conique en utilisant le pseudo-élément ::before ainsi que la propriété border :

exemple conic gradient pseudo-éléments css


.hack-conique {
	
display: flex;
margin: 2rem auto;
width: 200px; 
height: 200px;
border-radius: 50%;
background: white;
overflow: hidden;
	
}
		
		
.hack-conique:before {

content: '';
display: block;
border: 100px solid;
border-color: #0af gold red purple;
border-radius: 50%;
filter: blur(20px)
	
}




Fonction repeating-conic-gradient() :

Il est également possible comme avec les dégradés linéaires et radiaux de répéter un dégradé conique avec la fonction repeating-conic-gradient(). Un exemple ci-dessous :

exemple conic gradient repeat


.conique-repet { 

background:repeating-conic-gradient(red 10%,gold 20%); 

} 



Autre exemple, celui d'un damier, où l'on va utiliser la position ainsi que la taille pour la répétition du dégradé :

exemple conic gradient damier


.damier { 

   
background: conic-gradient(#fff 90deg, black 90deg 180deg, #fff 180deg 270deg, black 270deg) top left / 25% 25% repeat;

} 






Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.

haut page