Les dégradés coniques en CSS

  1. Introduction
  2. La fonction CSS conic-gradient()
    1. Les mots-clés from et at
    2. Les points d'arrêts de couleur
    3. La fonction repeating-conic-gradient()
  3. Aller plus loin

👉 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 poid 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.

Point négatif : le support des navigateurs🔗 est, à l'heure de l'écriture de cet article, quasi inexistant. Mais, gageons que le retard sera très vite comblé.

Ceci dit, vous pouvez d'ores et déjà utiliser cette nouvelle fonctionnalité puisqu'il existe un polyfill🔗 réalisé par Lea Verou🔗.


👉 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.

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 :



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 :

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).



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 :



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



⚠️ NB : le polyfill ne permet pas d'utiliser les deux mots-clés. Mais cela fonctionne sur les navigateurs supportant les degradé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.



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 :

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 :



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 :



.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 :



.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 :



.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é :



.damier { 

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

} 





👉 Source, inspiration, ressources :

Documentation🔗 sur MDN.

Une série d'exemples🔗 par Ana Tudor.

Article (EN)🔗 sur CSS tricks.