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

Vous savez remplir une boite avec une couleur de fond unie ou avec une image.
Sachez qu'il est désormais de définir en guise de fond un dégradé (radial ou linéaire).

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 !

Des dégradés radiaux simples

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

dégradé radial tricolore
dégradé radial quadricolore
dégradé radial 4 nuances de rouge notées en rgba (transparence progressive)
dégradé radial 5 nuances de jaune notéés en rgba (transparence progressive)

Le code CSS et HTML correspondant

...
<style>
.arrondi{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ; border-radius : 150px; }
	
#degrade_radial_1 {background : radial-gradient(black, silver,lightgray) ; }
#degrade_radial_2 {background : radial-gradient(darkgreen, green, lime,palegreen ) ; }
#degrade_radial_3 {background: radial-gradient(rgba(255,0,0,1),rgba(255,0,0,0.7),rgba(255,0,0,0.5),rgba(255,0,0,0.2)); }
#degrade_radial_4 {background: radial-gradient(rgba(255,255,0,1),rgba(255,255,0,0.7),rgba(255,255,0,0.5),rgba(255,255,0,0.2), rgba(255,255,0,0) ) }
...
<div class ="arrondi" id = 'degrade_radial_1' > </div>
<div class ="arrondi" id = 'degrade_radial_2' > </div>
<div class ="arrondi" id = 'degrade_radial_3' > </div>
<div class ="arrondi" 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 DIV affectés de la classe "arrondi" deviennent des ronds grâce à border-radius : moitié du côté du carré.
Sauf précision contraire les différentes couleurs se partagent de façon égale le rayon du dégradé;
Par défaut le dégradé part du centre de la boîte.
Comme vous le constatez, les couleurs peuvent être notées via leur nom ou leur code (héxadécimal, rgb, rgba).

Dégradés linéaires simples

Un dégradé linéaire a 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 & HTML correspondant

.carre{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 ) ; }
...
<div class ="carre" id = 'degrade_2_180' > </div>
<div class ="carre" id = 'degrade_3_45' ></div>
<div class ="carre" id = 'degrade_3_90' ></div>
<div class ="carre" id = 'degrade_4_135' ></div>	
...

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

Nous avons supposé que la forme du dégradé radial é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%, turquoise 40%, cyan 60%, lightcyan 80%, white 90%);">

Admettez que c'est bluffant ; une seule instruction HTML (avec une règle de style en ligne) pour réaliser ce superbe dégradé radial.

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é
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 "turquoise" commence à 40% (donc fin de "orange") et se termine à 60% (début de la couleur suivante).

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 simple et 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

Ne confondez pas white et transparent

En effet dans la liste des couleurs vous pouvez employer le terme "transparent" (comme en français).

Code CSS et HTML d'un page web

...
<style>
.arrondi{display : block ; width : 500px ; height : 500px ; margin: 10px auto ; border : 1px solid black ; border-radius : 250px; }
	
#degrade_radial_1 {background : radial-gradient(farthest-corner, darkgreen, green, lime,palegreen, white 70%) ; }
#degrade_radial_2 {background : radial-gradient(farthest-corner, darkgreen, green, lime,palegreen, transparent 70% ) ; }
...
<article style ="width : 80% ; margin : 10px auto ; background : palegreen; " >
	<div class ="arrondi" id = 'degrade_radial_1' > </div>
	<div class ="arrondi" id = 'degrade_radial_2' > </div>
</article>
...

Les deux dégradés radiaux sont identiques sauf la dernière couleur : "white" dans le premier et "transparent" dans le second.
Attention le background de la boite parente (élément "article") est "palegreen".

Le rendu dans un Iframe

Remarquez bien la différence entre les deux dégradés.
Si la fond de la boite parente avait été "white", le rendu des deux dégradés aurait été identique.

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.
L'emploi des ces deux propriétés est encore une fois déroutante de simplicité.

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

Le rendu

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é a une portée de 100px or la hauteur de la boite étant de 400 pixels, le motif est donc 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.

Combiner border-image et un dégradé

Un superbe tableau impressionniste.

Le code de la page web

...
#cadre {
   border-image-source:url("border2.png");
   border-image-width:50px;
   border-image-repeat:stretch;
   border-image-slice:100;
}
div {height : 500px ; width : 60%; margin : 10px auto ; }
</style></head>
<body>
<div id ="cadre"  style ="background-image : 
		radial-gradient(farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);">
</div>
...

Emploi des propriétés préfixées border-image pour encadrer un dégradé radial.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville