W3Schools Tryit Éditeur

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
hauteur: 200px;
background-color: red; /* Pour les navigateurs qui ne prennent pas en charge les dégradés */
background-image: repeating-linear-gradient(rouge, jaune 10%, vert 20%);
}

#grad2 {
hauteur: 200px;
background-color: red; /* Pour les navigateurs qui ne prennent pas en charge les dégradés */
background-image: repeating-linear-gradient(45deg,rouge,jaune 7%,vert 10%);
}

#grad3 {
hauteur: 200px;
background-color: red; /* Pour les navigateurs qui ne prennent pas en charge les dégradés */
background-image: repeating-linear-gradient(190deg,rouge,jaune 7%,vert 10%);
}

#grad4 {
hauteur: 200px;
background-color: red; /* Pour les navigateurs qui ne supportent pas les dégradés */
background-image: repeating-linear-gradient(90deg,rouge,jaune 7%,vert 10%);
}

#grad5 {
hauteur: 200px;
background-color: red; /* Pour les navigateurs qui ne supportent pas les dégradés */
background-image: repeating-linear-gradient(45deg, rouge 0px, rouge 10px, jaune 10px, jaune 20px);
}
</style>
</head>
<body>

<h1>Dégradé linéaire répétitif</h1>

<p>Un dégradé répétitif sur un axe de 45 degrés commençant par rouge et se terminant par vert :</p>
<div id="grad2"></div>

<p>Un dégradé répétitif sur l'axe 190deg commençant par rouge et se terminant par vert :</p>
<div id="grad3"></div>

<p>Un dégradé répétitif sur l'axe de 90 degrés commençant par rouge et se terminant par vert :</p>
<div id="grad4"></div>

<p>Un dégradé répétitif sur un axe de 45 degrés avec des bandes solides :</p>
<div id="grad5"></div>

</body>

</html>