24 - Les fonds (dégradés)

Nous avons vu qu'il est possible d'ajouter des "backgrounds" de couleur et/ou d'images. Il est également possible d'ajouter des dégradés. Ces dégradés peuvent être "linéaires" ou "radials". On peut donc effectuer un dégradé en suivant une ligne ou en cercles.

Un dégradé peut contenir deux ou plus de couleurs.

Un dégradé peut contenir de la transparence.

Un dégradé peut être orienté via des degrés ou des orientations.

Notez qu'à l'instar d'un background-color, votre dégradé occupera la totalité de l'élément sur lequel il est utilisé.


<style>
      div.linear_1 {
        background-image: linear-gradient(#ff6699, #00ccff);
      }

      div.linear_2 {
        background-image: linear-gradient(to right, #ff6699, #00ccff);
      }
      div.linear_3 {
        background-image: linear-gradient(to bottom right, #ff6699, #00ccff);
      }

      div.linear_4 {
        background-image: linear-gradient(33deg, #ff6699, #00ccff);
      }

      div.linear_5 {
        background-image: linear-gradient(33deg, #ff6699, #00ccff, #66b566);
      }

      div.linear_6 {
        background-image: linear-gradient(
          33deg,
          rgba(0, 204, 255, 0) 70%,
          rgba(0, 204, 255, 1)
        );
      }

      div.linear_7 {
        background-image: linear-gradient(
          33deg,
          rgba(0, 204, 255, 0),
          rgba(0, 204, 255, 1)
        );
      }

      div.radial {
        background-image: radial-gradient(circle at top left, #ff6699, #00ccff);
      }

      div {
        width: 50vh;
        height: 50vh;

        
      }
    </style>

  <body>
    <div class="linear_1"></div>
    <div class="linear_2"></div>
    <div class="linear_3"></div>
    <div class="linear_4"></div>
    <div class="linear_5"></div>
    <div class="linear_6"></div>
    <div class="linear_7"></div>
    <div class="radial"></div>
  </body>

Comme il est souvent difficile d'écrire manuellement ce genre de codes, divers outils existent pour générer un dégradé de manière visuel et d'en récupérer le code. Vous pouvez par exemple utiliser :