CSS : les dégradés linéaires et radiaux avec CSS3

Un exemple de dégradé complexe

Non ce superbe ciel azur n'est pas une image réalisée avec un logiciel de dessin tel paint mais un dégradé radial produit uniquement avec du CSS !
Avec CSS3, on peut désormais appliquer au "background" d'une boite un dégradé linéaire ou radial.

Des dégradés radiaux simples

Commençons par les dégradés radiaux.
Le dégradé rayonne à partir d'un point.

dégradé radial bicolore
dégradé radial tricolore
dégradé radial quadricolore
dégradé radial pentacolore (5 couleurs)

Le code CSS et HTML correspondant

...
<style>
	.boite{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ;}
	
	#degrade_radial_1{border-radius : 150px ;
		background : radial-gradient(black, white) ; }
	#degrade_radial_2{border-radius : 150px ;
		background : radial-gradient(green, lime, white ) ; }
	#degrade_radial_3{border-radius : 150px ;
		background: radial-gradient(darkgreen,green, lime, white ) ; }
	#degrade_radial_4{border-radius : 150px ;
		background: radial-gradient(black,darkgreen,green, lime, white ) ; }
	
	...
	<div class ="boite" id = 'degrade_radial_1' > </div>
	<div class ="boite" id = 'degrade_radial_2' > </div>
	<div class ="boite" id = 'degrade_radial_3' > </div>
	<div class ="boite" id = 'degrade_radial_4' > </div>
...

Commentaire du code

Les boîtes DIV deviennent de type inline-block de façon à ce qu'elles se positionnent les unes à côté des autres (tant qu'il y a de la place) et non plus les unes en dessous des autres.
Les boîtes DIV font 400 pixels par 400 mais grâce à border-radius : 200px ces boîtes apparaissent telles des cercles !

La fonction radial-gradient est facile à mettre en oeuvre. Il suffit d'indiquer en paramètres les couleurs successives du dégradé.
Par défaut le dégradé part du centre de la boîte.

Dégradés linéaires simples

Le dégradé respecte un axe.

premier dégradé : bicolore (du haut) vers le bas (ou angle de 180 degrés)
deuxième dégradé : tricolore avec un angle de 45 degrés (ou diagonale du bas vers le haut)
troisième dégradé : tricolore allant (de la gauche) vers la droite (ou angle de 90 degrés)
quatrième dégradé : quadricolore avec un angle de 135 degrés (ou diagonale du haut vers le bas)

Le code CSS correspondant

	.boite{display : inline-block ; width : 300px ; height : 300px ; 
		margin:1% ; border : 1px solid black ;}
	
	#degrade_2_180 {background : linear-gradient(to bottom, black ,white) ; }
	#degrade_3_45{background : linear-gradient( 45deg, green,lime, white ) ; }
	#degrade_3_90{background: linear-gradient(to right, red, orange, white ) ; }
	#degrade_4_135{background : linear-gradient(135deg, black, purple,pink, white ) ; }

Commentaire

Le premier argument de la fonction linear-gradient est l'axe du dégradé exprimé sous forme d'un angle ou d'un mot (top, right, bottom, etc.) et précédé de "to".
Les arguments suivants de la fonction linear-gradient sont les couleurs du dégradé (au moins deux couleurs).

180 degrés (ou "to bottom") pour un dégradé vertical du haut vers le bas
45 degrés (ou "to top right") pour un dégradé diagonal du bas vers le haut
90 degrés (ou "to right") pour un dégradé horizontal de la gauche vers la droite
135 degrés (ou "to bottom right") pour un dégradé diagonal du haut vers le bas

Dégradés radiaux complexes

Abordons maintenant des dégradés radiaux plus sophistiqués.

Exemple 1

Dans les exemples simples de dégradés radiaux nous avons supposé que la forme du dégradé était circulaire et que le dégradé partait du centre de la boite.
Or un dégradé radial peut être de forme elliptique et le dégradé peut partir d'un autre point que le centre de la boite.
Ci-dessous un coucher de soleil !

Le code HTML et CSS correspondant : <div class ="boite" style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner ellipse at bottom center, orange 0%, blue 50%, skyblue 100% );"> </div>

radial-gradiant

farthest-corner : indique que le dégradé se termine jusqu'au coin le plus éloigné
ellipse : le dégradé est de forme elliptique ; autre mot clé possible : circle (valeur par défaut)
bottom center : position de départ du dégradé
blue 50% : par défaut les couleurs se répartissent équitablement dans le dégradé (si 3 couleurs chacunes 1/3) mais ici on indique que la couleur "blue" commence à 50% (donc fin de "orange") et se termine à 90% sur l'axe (début de "skyblue")

L'argument relatif à la portée du dégradé ne concerne que les dégradés radiaux (fonction : radial-gradient).

Exemple 2

Reprenons le thème présenté en début de page : le superbe ciel d'été.

Le code est très court : <div class ="boite" style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);"> </div>

Il s'agit d'un dégradé radial circulaire qui part du centre de la boite et qui comprend trois couleurs.

Mais revenons sur le premier argument : porté du dégradé.

closest-corner : vers le coin le plus proche
closest-side : vers le côté le plus proche
farthest-corner : vers le coin le plus lointain
farthest-side : vers le côte le plus lointain

Dégradés répétifs

Tant pour les dégradés radiaux que linéaires le motif du dégradé peut être répété.
En effet il existe les propriétés repeating-linear-gradiant & repeating-radial-gradiant.

Un dégradé linéaire répétitif

Le code : <div class ="boite" style ="width : 100%; height : 400px ; background-image : repeating-linear-gradient(black, blue, red 100px );"> </div>

Par défaut un dégradé linéaire va du haut vers le bas ; c'est ce que nous voulons donc le premier paramètre (axe du dégradé) peut être omis.
La commande devient "repeating-linear-gradient".
Le dégradé se déroule sur 100px or la hauteur de la boite étant de 400 pixels, le motif est répété 4 fois !

Un dégradé radial répétitif

Le rendu est assez psychanalytique.

Le code correspondant : <div class="boite" style ="width : 100%; height : 400px ; background-image : repeating-radial-gradient(farthest-side ellipse at center, lime, red 20% );"> </div>

Il s'agit d'un dégradé répétitif radial (et plus précisément elliptique) qui démarre du centre qui s'applique à 20% et est donc répété 5 fois.

Les dégradés CSS et les zones de dessin dans la page

Je vous rappelle que si vous voulez dessiner (dessins statique ou animé) dans une page il faut utiliser l'API Canvas ou le langage SVG.

Rien n'interdit d'appliquer un dégradé CSS à une balise CANVAS ou SVG de la page.
En d'autres termes vous pouvez utiliser toute la puissance des dégradés CSS pour créer le "background" de votre zone de dessin Canvas ou SVG.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Transformations, transitions & animations

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville