Chapitre 560 | Les dégradés / Gradients

Explications des exemples

1. Gradient 1 : linear-gradient(45deg, #111618 0%, #232d35 100%)

• Type : dégradé linéaire.
• Orientation : 45 degrés (diagonal).
• Couleurs :
  • Débute avec #111618 (gris foncé) à 0%.
  • Se termine avec #232d35 (gris un peu plus clair) à 100%.

---

2. Gradient 2 : linear-gradient(red 10%, 30%, blue 90%)

• Type : dégradé linéaire.
• Orientation : verticale (par défaut).
• Couleurs :
  • red commence à 10%.
  • Transition entre rouge et bleu entre 30% et 90%.
  • Se termine avec blue à 90%.

---

3. Gradient 3 : Combinaison de 3 dégradés linéaires

• Type : dégradés linéaires multiples superposés.
• Couleurs :
  • Un dégradé rouge à 217°.
  • Un dégradé vert à 127°.
  • Un dégradé bleu à 336°.
• Effet : crée une combinaison de dégradés colorés en transparence, ressemblant à une lumière diffusée multicolore.

---

4. Gradient 4 : linear-gradient(to right, red, yellow)

• Type : dégradé linéaire.
• Orientation : de gauche à droite (to right).
• Couleurs :
  • Débute avec red (rouge).
  • Se termine avec yellow (jaune).

Découverte

Exemples de code
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

Exemples de générateur de gradient :
https://www.w3schools.com/colors/colors_gradient.asp

https://cssgradient.io/