Les dégradés de couleurs en CSS3 avec gradient

Un dégradé CSS3 avec gradient

Bonjour à tous !

Aujourd’hui nous allons parler des dégradés en CSS3. Vous en avez probablement déjà rencontré, et peut-être même déjà utilisé via des générateurs. Ce tutoriel très complet va vous permettre d’aller plus loin et de comprendre en détail comment les utiliser, ce qui améliorera les performances d’affichage de votre site en évitant d’avoir à utiliser des images !

Bastien Uranga Ce tutoriel a été rédigé par Bastien Uranga, étudiant en informatique à Bordeaux et passionné par les technologies web. En plus de ses études, il lui arrive souvent de prendre le rôle d’intégrateur dans certains projets et d’améliorer ses connaissances en HTML5 et CSS3. Vous pouvez d’ailleurs ajouter Bastien sur Twitter pour suivre l’actualité HTML5 et CSS3 via son compte @Stoows. Bonne lecture !

Pour commencer …

Nous allons tout d’abord créer une div :

<div id="gradients"></div>
 

Puis dans notre feuille de style CSS, nous ajoutons les propriétés suivantes :

#gradients {
  	width:200px;
  	height: 60px;
}

Précision et rappel

Tout d’abord, j’aimerais casser une idée préconçue : gradient n’est pas une propriété CSS, mais une valeur de background-image. Sans doute ferez-vous l’erreur au début d’écrire quelque chose comme :

#gradients {
linear-gradient: valeur;
}
 

Oubliez de suite les 4 lignes ci-dessus, et enregistrez bien la phrase suivante :
« Gradient est une valeur de la propriété background-image. »

Je vous rappelle tout de même que vous devez toujours mettre la propriété non préfixée en dernier dans le seul but d’assurer la stabilité de votre design dans les années futures. Tous les exemples ci-dessous seront donc de la forme :

background-image: -webkit-linear-gradient(valeurs);
background-image:    -moz-linear-gradient(valeurs);
[...]
background-image:         linear-gradient(valeurs);

Maintenant que tout ceci est clair, nous allons pouvoir commencer à nous amuser !

Les différentes formes de gradient

La valeur gradient peut avoir, en fonction des navigateurs deux formes différentes que nous détaillerons dans la suite de ce tutoriel.

Attends, attends ! On sait comment utiliser des propriétés spécifiques à chaque navigateur.
Mais comment on fait pour les valeurs ?

Vous avez donc bien saisi la différence entre propriété et valeur, bravo ! Sachez cependant que les préfixes que vous avez rencontrés pour les propriétés sont les mêmes pour les valeurs et qu’ils s’utilisent de la même façon. On a donc :

  • -webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
  • -moz- pour Firefox 3.6, et suivants,
  • -ms- pour IE 10 et suivants,
  • -o- pour Opera 11.10, et suivants.

Commençons maintenant à étudier la plus simple des deux formes de gradient. C’est celle qui utilise les préfixes cités ci-dessus, suivi de linear-gradient :

 
background-image: -webkit-linear-gradient([param1], [param2 param3], [param4 param5]);
background-image:    -moz-linear-gradient([param1], [param2 param3], [param4 param5]);
background-image:     -ms-linear-gradient([param1], [param2 param3], [param4 param5]);
background-image:      -o-linear-gradient([param1], [param2 param3], [param4 param5]);
background-image:         linear-gradient([param1], [param2 param3], [param4 param5]);

Linear-gradient en détail

Vu la vivacité de votre esprit, vous observez rapidement que linear-gradient prend toujours les mêmes paramètres (j’appellerai « paramètres » ce qui se trouve entre parenthèses).

Premier paramètre : La position de départ du dégradé

Le premier paramètre (param1) est la position de départ de votre dégradé. Si vous voulez qu’il démarre en haut, vous n’aurez qu’à renseigner top, en bas bottom, à gauche left ou à droite right. Logique non ? Mais vous pouvez aussi combiner les deux : si vous décidez que votre dégradé commence en haut à droite, saisissez top right. Toutes les combinaisons que vous imaginez sont alors possibles ! Selon la position de départ que vous choisissez, votre dégradé ira dans la direction opposée. Si, comme dans l’exemple ci-dessus, le point de départ choisi est top right, la couleur de départ évoluera vers la couleur d’arrivée en direction de l’opposé de top : bottom, et de l’opposé de right : left. La position finale sera donc automatiquement bottom left. Il est tout à fait correct d’écrire aussi right top au lieu de top right. Vous obtiendrez le même effet.

Second et troisième paramètre : La couleur et l’étendue

Le second paramètre (param2) est la couleur de départ de votre dégradé et le troisième paramètre (param3) est un pourcentage et correspond à l’étendue de la couleur passée en second paramètre.

Attention : il n’y a pas de virgule entre la couleur et son pourcentage d’étendu ! N’en mettez pas ou votre dégradé ne fonctionnera tout simplement pas.

Nous souhaitons faire un dégradé du rouge vers le jaune. Nous pouvons donc utiliser le code suivant :

background-image: -webkit-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:    -moz-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:     -ms-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:      -o-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:         linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
On est obligé de mettre les couleurs comme toi, en hexadécimal ?

Non, vous pouvez très bien les mettre en RGB, ce qui donnera pour la première ligne :

background-image: -webkit-linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

Mais observons quelque chose de plus intéressant encore, et parlons de RGBA.

Quoi mais c’est quoi ce truc ? Encore une nouveauté CSS3 ?

C’est exactement ça ! Une nouveauté introduite par CSS3 et qui met en place la notion de transparence pour les couleurs. Alors comment ça marche ? C’est très simple !

Utiliser RGBA pour créer des dégradés transparents

Vous savez tous utiliser la valeur RGB qui prend trois paramètres pour changer la couleur d’un élément. Eh bien au lieu d’utiliser RGB, utilisez RGBA, et passez-lui un quatrième paramètre comme ceci : rgba(214,15,15,0.5).
Les trois premiers paramètres ne changent pas, ce sont les composantes rouges, vertes et bleues de la couleur choisie. Le quatrième paramètre est quant à lui plus mystique … c’est un nombre à virgule. Sachez qu’il doit être compris entre 0 et 1 et qu’il définit la transparence de votre élément. Plus cette composante est proche de 0, plus l’élément sur lequel vous avez appliqué cette valeur sera transparent : Si vous choisissez de mettre 1, aucune transparence ne sera appliquée, si vous mettez 0, l’élément sera complètement transparent.

N’hésitez pas à utiliser RGBA pour les dégradés, puisque cela fonctionne parfaitement ! Mais attention à bien écrire RGBA et mettre 4 paramètres. Ne faites pas comme moi lors de mon premier contact avec RGBA où j’avais tapé : rgb(214,15,15, 0.5) … Il est évident que plus rien ne fonctionnait ! Fermons donc cette parenthèse hors sujet, mais néanmoins intéressante, et revenons au sujet principal : les gradients !

Dans le cas présenté ci-dessus, il n’y a que deux couleurs (début et fin du dégradé). Mais vous pouvez en mettre autant que vous voulez ! Sachez seulement que la première et la dernière couleur renseignée sont respectivement les couleurs de début et de fin de votre dégradé. Rien ne vous empêche de passer par toutes les couleurs de l’arc-en-ciel dans un même dégradé.

Linear-gradient … adapté à Internet Explorer 9 et antérieurs

Maintenant que vous maitrisez la première forme de gradient nous pouvons passer à la deuxième, mais attention ! Messieurs et mesdames les puristes du W3C, cachez-vous les yeux et ne lisez pas ce qui suit. Ce n’est pas un conseil, non, non, non ! C’est un ordre.
En effet, nous allons maintenant voir l’équivalent des gradients pour Internet Explorer avec la propriété filter. Il ne s’agit pas vraiment de CSS3, mais je préfère vous en parler pour que vous sachiez comment faire un dégradé à peu près (oui, oui, a peu près !) équivalent sous IE.

Evidemment, Internet Explorer, peu respectueux des standards du Web, ne fait jamais comme tout le monde. En effet, et comme je vous le disais ci-dessus, il n’utilise pas la propriété background-image, mais plutôt la propriété filter. Voyez plutôt :

 
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#D60F0F', 
  endColorstr='#FFDD00', GradientType=0);

Vous n’avez ici à renseigner que deux couleurs, une pour le début (startColorstr), et une pour la fin (endColorstr). La valeur de GradientType peut prendre deux valeurs. Soit elle est à 0 et dans ce cas, le dégradé est vertical, soit elle est à 1 et le dégradé est horizontal.

Avec GradientType = 0 :

Dégradé CSS3 sous Internet Explorer de type 0

Avec GradientType = 1 :

Dégradé CSS3 sous Internet Explorer de type 1

Voilà pour le méchant Internet Explorer.

Notre code CSS ressemble donc maintenant à ça :

#gradients {
background-image: -webkit-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:    -moz-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:     -ms-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:      -o-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image:         linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D60F0F',endColorstr='#FFDD00', GradientType=1);
}

On peut considérer qu’avec les deux formes que je vous ai déjà données, nous avons géré tous les cas … Et c’est vrai ! Mais je vous ai menti, et il existe en fait une troisième forme de gradient qui mérite une partie à elle toute seule.

Les dégradés circulaires avec -radial-gradient

Jusqu’à présent nous avons utilisé la valeur linear-gradient pour créer des dégradés. Je vais maintenant vous faire découvrir la valeur radial-gradient, toujours a utiliser avec la propriété background-image, mais qui ouvre de nouvelles portes à la mise en place de dégradés sur votre site. Il est ainsi possible de faire des dégradés en forme de cercles dans ce genre là :

Dégradé radial en CSS3
Alors comment fait-on ? Il faut penser que pour faire un dégradé en forme de cercle, nous n’avons pas un, mais deux cercles … Je m’explique.
Si l’on prend l’exemple ci-dessus, on peut aisément considérer qu’en réalité nous avons deux cercles : l’un bleu et l’autre vert, mais que le cercle vert, qui a un rayon plus grand est tronqué par le rectangle que nous voyons (à cause par exemple d’une div de taille fixe). Pour mieux saisir mon baratin, regardez plutôt l’exemple suivant :

Cercle de dégradé radial en CSS3

Ce que nous voyons est ce qui est à l’intérieur du carré. Mais en réalité ce que l’on ne voit pas, c’est le reste du cercle vert. Et c’est là-dessus que nous allons jouer !

La valeur radial-gradient (sans aucun préfixe) est supportée par Safari depuis sa version 4, Firefox depuis sa version 3.6, Chrome depuis sa version 9, et Internet Explorer depuis sa version 10. Nous mettons donc toujours les valeurs préfixées pour la rétro-compatibilité. Voyons donc comme fonctionne radial-gradient :

background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:    -moz-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:     -ms-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:      -o-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:         radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);

Attention : Opera ne gère en réalité pas encore cette valeur, mais on préfère mettre la ligne lui correspondant dans le cas où le navigateur l’intégrerait à ses prochaines versions.

Les deux premiers paramètres (50% 50%), correspondent à la position en x et en y des cercles vert et bleu. Ici, le centre sera placé au centre de la div. Le troisième et le quatrième paramètre correspond à la forme du dégradé (dans ce cas il prendra la valeur ellipse ou circle), et à la taille de celui-ci (dans ce cas il prendra la valeur closest-side, closest-corner, farthest-side, farthest-corner). A vous de tester chacune de ces possibilités et de voir laquelle correspond le mieux à vos besoins. Enfin, les trois derniers paramètres sont les couleurs du grand cercle vert (#B8FB97), puis du petit cercle bleu (#53B8EB), suivi de l’étendu du dégradé en pourcentage.

Bien je crois avoir fait le tour des gradients. Ouf ! Premier tutoriel passionnant mais très long à traiter vu toutes les particularités de ces éléments ! Ce tutoriel touche donc à sa fin. Je ne sais pas si vous vous en rendez compte, mais les possibilités sont colossales avec tous les éléments que j’ai pu vous donner ici. N’hésitez pas à chercher par vous-même, à faire de belles choses, et surtout à nous les faire partager en commentaires !

A bientôt !

23 thoughts on “Les dégradés de couleurs en CSS3 avec gradient

  1. Bonjour et belle explication pour ce gradient, par contre une question me trotte : a t-il moyen de faire créer un dégradé d’une hauteur fixe ?

    je m’explique : Auparavant on appliquait un background en noir par exemple et au dessus on mettait une image d’un dégradé qui par exemple fait 300px de haut, le tout sur la balise body du site.

    body
    {
    background:url(‘./fondDegrade.png’) repeat-x #000;
    }

    maintenant en css 3 :

    body
    {
    background-image: linear-gradient(top,#fff,#000);/* W3C Règles */
    }

    avons nous moyen de donner une taille a ce fond autre que celle de la page qui varie selon chaque contenu ?

    j’ai trouvé ceci afin de régler le problème de strie du fond si la page fais par exemple que 100px de haut, le fond se répète alors je rajoute background-repeat:repeat-x; ainsi par de répétition sur la hauteur.

    merci

    • Bonsoir Laurent et merci pour ton commentaire.

      Concernant ta question, ce que tu me demandes de faire n’est pas possible avec la méthode que tu me donnes, en appliquant ton background-image sur un body. Néanmoins, rien ne t’empêche de créer une div de taille fixe sur laquelle tu ajoute ta propriété background-image !

      Si tu veux que nous continuions à en discuter, je t’invite à m’ajouter sur Twitter, pour aller plus loin, ou continuer notre discussion par mail :)

      J’espère que ma réponse t’aura aidé !

  2. Salut et merci pour toutes ces explications très bien claires, je suis un novice de chez novice et j’aurais une question:

    Tu nous a donné toutes les combinaisons de dégradés linaires pour tous les navigateurs mais pour le radial tu ne nous a pas expliqué Internet Explorer, est-ce parce qu’il ne supporte pas cette fonctionnalité ? Merci d’avance pour ta réponse.

  3. Très bon tuto, merci.
    Une précision d’ordre historique :
    la propriété “filter” de IE a été implémentée à une époque où les standards sur ce genre d’effets n’existaient pas. Je crois qu’on pouvait déjà utilisé ceci dans IE4, ou au pire IE5 !! En tout cas, j’utilisais des ombres portées et des filtres opacity, grayscale, etc dans IE5 pour des dev d’intranet, alors qu’aucun autre navigateur n’en était capable. Par contre, c’est vrai que ces effets étaient nettement moins souples et paramétrables que les nouveaux standards.

    • En effet, depuis son origine jusqu’à récemment, Microsoft trouvait que l’évolution des standards du W3C, qui prend beaucoup de discussions et d’échanges, prenait trop de temps. Il a donc ajouté à son navigateur des possibilités hors standard.

      Comme tu le précises, il y avait moins de possibilités avec les ombres ou la transparence qu’avec le standard CSS 3, mais surtout, le rendu n’était franchement pas des plus beaux, et c’est d’ailleurs un grief contre le navigateur: jusqu’à la version 7 (voire 8), le rendu des pages est beaucoup, beaucoup moins bon que les concurrents. En même temps, en intranet, c’était tout IE… à l’époque!

      Aussi, Microsoft premier, peut-être, mais si Microsoft, au lieu d’implémenter SON standard avait daigné participer à l’élaboration du standard avec ses partenaires du W3C (les plus grands noms de l’informatique en font partie), il n’aurait pas fallu attendre la version 3 des CSS pour intégrer la possibilité d’ombres portées ou autres effets. Membre éminent du W3C, Microsoft a, en parallèle, tout fait pour le dynamiter de l’intérieur.

      Et si Microsoft était le premier à instaurer un attribut filter en CSS permettant des manipulations diverses et variées, il y a en revanche un autre élément propice au développement du web qu’elle a mis sacrément du temps à implémenter par rapport à ses concurrents: l’antialiasing.

      Cela fait déjà quelque temps qu’on peut intégrer des polices à une page web, même si cela pouvait poser des problèmes de compatibilité navigateur et prendre de développer des patchs pour les navigateurs incompatibles. C’était possible aussi sur IE mais en revanche, utiliser des polices externes conduisait à un rendu abominable avec IE. Déjà qu’avec les polices standards c’était pas jojo…

      Du coup, pendant longtemps, soit on n’utilisait que les polices standards (limité et pas beau sous IE), soit on faisait du Flash (bien mais lourd à développer et maintenir), soit on produisait des images pour n’importe quel texte exploitant une police non standard, d’où des poids binaires échangés beaucoup plus massifs. Il aura fallu à Microsoft 10 ans pour enfin comprendre l’intérêt du standard et s’y impliquer. On a vu mieux comme leader.

    • Avec un dégradé utilisant une image, tu n’as pas autant de flexibilité – tu ne peux pas changer le dégradé instantanément, ni le modifier en live via JavaScript par exemple.
      Ensuite, utiliser CSS au lieu d’une image économise une requête HTTP ce qui améliore les performances du site !

  4. Bonjour,
    Je veux faire un dégradé linéaire modéré : incrustation en
    dégradé avec une opacité de 30% maximum, blanc
    pour les gris et blanc en mode de fusion «incrustation»
    pour les couleurs.
    Comment je peux procéder avec le linear-gradient?
    Merci d’avance

    • Il est impossible d’avoir des modes de fusion comme ceux de PhotoShop pour le moment, à part peut-être dans les nightly builds webkit.

  5. Et n’oublions pas la géniale extension de Firefox : ColorZilla qui contient un générateur de dégradés tout à fait bluffant, et qui surtout permet d’avoir un aperçu en temps réel.

  6. Salut

    Super tuto :) ca m a permis d’y voir plus clair.
    Merci

    Par contre :
    div{background:RGBA(255,0,0,1);} me donne une div avec un bg rouge a 100% .Il me semble donc que pour le 4eme parametre de RGBA, plus la valeur est proche de 1, plus la couleur est visible.
    Peut être que cela a changé depuis ?

  7. Bonjour,
    Voilà un très bon tutoriel ! Je suis en train de créer un site web pour me présenter et la partie du gradient radial m’a bien aidé.
    Pour répondre à la question de Marty du 3 décembre 2011, voici comment procéder pour les versions d’IE 9- (les 2ères lignes du code ci-dessous) :

    background: royalblue;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, royalblue, white 100%);
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, royalblue, white 100%);
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, royalblue, white 100%);
    background-image: -o-radial-gradient(50% 50%, ellipse closest-side, royalblue, white 100%);
    background-image: radial-gradient(50% 50%, ellipse closest-side, royalblue, white 100%);

  8. Pas super l’astuce, car dans les endroits où l’opacité est à 0, le texte n’apparaît pas.
    mieux vaut encore utiliser le vieux filtre:
    body{
    filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=’#531222′, startColorstr=’#da4555′, gradientType=’1′);
    color:88899;
    }

  9. Bonjour tout d’abord merci pour ce tuto, quel travail !!
    Je voudrais mettre un fond “img no repeat top de ma page + un dégradé” mais apparemment ça ne fonctionne pas voici mon code:

    background: url(../img/bg_top_2.jpg) top no-repeat, linear-gradient(top, rgb(220,216,202) 22%, rgb(237,235,228) 58%);

    Une idée serait la bienvenue je débute en css3, j’ai 10ans de retard j’étais resté sur le bon vieux html :p

  10. Bonjour et bonne année à tous,

    Merci pour ce tuto qui permet de fixer les choses et de s’y replonger si besoin. En plus, il a le mérite d’être clair ;-).

    J’ai juste une question. Je m’occupe d’un site où le dégradé comprend 3 couleurs et dans les exemples de Bastion, il ne parle que de deux couleurs. Comment faire pour ajouter une 3ème couleur ?

    Merci d’avance.

  11. Voici un exemple de trois couleurs :
    background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#0FF),color-stop(0.0, #FF0), color-stop(0.7, #F0F), color-stop(1.0, #0FF));
    background: -moz-linear-gradient(top,#FF0 0%,#F0F 70%,#0FF 100%);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>