CSS : Les fonds dégradés

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

Le dégradé rayonne à partir d'un point.

Le code correspondant

... <style> div{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 id = 'degrade_radial_1' > </div> <div id = 'degrade_radial_2' > </div> <div id = 'degrade_radial_3' > </div> <div id = 'degrade_radial_4' > </div> ...

Commentaire du CSS

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.

Le code CSS correspondant

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

Dégradés radiaux complexes

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 style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner ellipse at bottom center, orange 0%, blue 30%, skyblue 90% );"> </div>