Faire des dégradés en CSS

Hello

Ici, nous allons parlé de dégradés à réaliser en CSS uniquement. Il en existe 2 types :

• linéaire,
  
• circulaire.

Un dégradé linéaire se déclarera de la façon suivante : l'axe/la direction, la couleur de départ et la couleur d'arrivée. Voici quelques exemples :

* Dégradé haut/bas

Code:

.degrade1{
         background: blue;
         background: -webkit-linear-gradient(top, blue, purple);
         background: -moz-linear-gradient(top, blue, purple);
         background: linear-gradient(top, blue, purple);
      }

<div class="degrade1">
   Dégradé haut/bas - Bleu vers mauve
</div>

Spoiler:

* Dégradé gauche/droite

Code:

.degrade2{
         background: green;
         background: -webkit-linear-gradient(right, green, orange);
         background: -moz-linear-gradient(right, green, orange);
         background: linear-gradient(right, green, orange);
      }
      
      <div class="degrade2">
         Dégradé gauche/droite - orange vers vert
      </div>

Spoiler:

* Dégradé en diagonale avec 4 couleurs

Code:

.degrade3{
         background: green;
         background: -webkit-linear-gradient(-45deg, blue 0, purple 33%, orange 66%, green 100%);
         background: -moz-linear-gradient(135deg, blue 0, purple 33%, orange 66%, green 100%);
         background: linear-gradient(135deg, blue 0, purple 33%, orange 66%, green 100%);
      }

<div class="degrade3">
         Dégradé en diagonale haut gauche vers bas droite - bleu vers mauve vers orange vers vert
      </div>

Spoiler:

Ne pas oublier d'indiquer avant de déclarer les dégradés une couleur de fond (dans le cas où les dégradés ne seraient pas pris en compte)


Un dégradé circulaire se déclarera de la façon suivante : le type (cercle ou ellipse) et l'axe/la direction, la couleur de départ et la couleur d'arrivée. Voici quelques exemples :

* Dégradé circulaire centre vers extérieur

Code:

.degrade4{
         background: purple;
         background-image: -webkit-radial-gradient(circle, blue 0, purple 100%);
         background-image: -moz-radial-gradient(circle, blue 0, purple 100%);
         background-image: radial-gradient(circle, blue 0, purple 100%);
      }
      
      <div class="degrade4">
         Dégradé centre vers extérieur - Bleu vers mauve
      </div>
      

Spoiler:

* Dégradé "ellipse" centre vers coin le plus proche

Code:

   .degrade5{
         background: green;
         background-image: -webkit-radial-gradient(ellipse closest-corner, orange 0, green 100%);
         background-image: -moz-radial-gradient(ellipse closest-corner, orange 0, green 100%);
         background-image: radial-gradient(ellipse closest-corner, orange 0, green 100%);
      }
      
      <div class="degrade5">
         Dégradé centre vers coin le plus proche - orange vers vert
      </div>

Spoiler:

Je ne mets que 2 exemples ici, mais il y a 4 types d'axe/direction :
-> le bord le plus proche : closest-side
-> le bord le plus éloigné : farthest-side
-> le coin le plus proche : closest-corner
-> le coin le plus éloigné : farthest-corner

Personnellement, je ne retiens jamais les dégradés :=): Mais j'ai un site super génial enjoycss qui les fait pour moi et je n'ai plus qu'à copier/coller le code et à le nettoyer un peu.

---

C'est tout pour cette fois Si tu as des questions, n'hésite surtout pas