Cómo hacer degradados lineales para fondos con CSS

La propiedad repeating-linear-gradient permite crear patrones de líneas intercaladas.

Degradado lineal ejemplo 1

• Prueba 1
• Prueba 2

Ejemplo 2

Degradado lineal ejemplo 2

• Prueba 1
• Prueba 2

Ejemplo 3

Degradado lineal ejemplo 3

• Prueba 1
• Prueba 2

Ejemplo 4

Degradado lineal ejemplo 4

• Prueba 1
• Prueba 2

<div class="caja">
<h4>
<em>Degradado lineal ejemplo 1</em></h4>
<ul style="list-style: none;">
<li>Prueba 1</li>
<li>Prueba 2</li>
</ul>
</div>

<div class="caja-ms2">
<h4>
<em>Degradado lineal ejemplo 2</em></h4>
<ul style="list-style: none;">
<li>Prueba 1</li>
<li>Prueba 2</li>
</ul>
</div>

<style>
.caja-ms2 {
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
background: repeating-linear-gradient(135deg, #000 15px, #000 18px, #212529 20px, #000 21px, #212529 23px, #000 24px); 
border-radius: 5px; 
border: 2px solid #5878ca; 
color: white; font-family: Times New Roman, serif; 
font-size: 18px; 
font-weight: 400; 
margin: 0 0 25px; 
overflow: hidden; 
padding: 20px; 
text-align: 
center; width: 75%;
}
</style>

<div class="caja-ms3">
<h4>
<em>Degradado lineal ejemplo 3</em></h4>
<ul style="list-style: none;">
<li>Prueba 1</li>
<li>Prueba 2</li>
</ul>
</div>

<style>
.caja-ms3 {
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
background: repeating-linear-gradient(135deg, #000 1px, #212529 1px, #000 1px, #000 1px, #212529 1px, #000 20px);
border-radius: 5px; 
border: 2px solid #5878ca; 
color: white; font-family: Times New Roman, serif; 
font-size: 18px; 
font-weight: 400; 
margin: 0 0 25px; 
overflow: hidden; 
padding: 20px; 
text-align: 
center; width: 75%;
}
</style>

<div class="caja-ms4">
<h4>
<em>Degradado lineal ejemplo 4</em></h4>
<ul style="list-style: none;">
<li>Prueba 1</li>
<li>Prueba 2</li>
</ul>
</div>

<style>
.caja-ms4 {
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
background: repeating-linear-gradient(135deg, #000 15px, #000 18px, #212529 20px, #000 21px, #212529 23px, #000 24px, #212529 26px, #000 27px);
border-radius: 5px; 
border: 2px solid #5878ca; 
color: white; font-family: Times New Roman, serif; 
font-size: 18px; 
font-weight: 400; 
margin: 0 0 25px; 
overflow: hidden; 
padding: 20px; 
text-align: 
center; width: 75%;
}
</style>