How to repeat linear gradients with CSS

---

<p>To repeat linear gradients with CSS, use the repeating-linear-gradient() function. You can try to run the following code to implement it:</p><h4>Example</h4><p><a class="demo" href="http://tpcg.io/89XVLA" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#demo { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: repeating-linear-gradient(red, yellow 30%, green 30%); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Linear Gradient&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &lt;div id = &quot;demo&quot;&gt;Repeating Linear Gradients&lt;/div&gt;&lt;br&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Repeat a linear gradient with CSS
• How to use angles on linear gradients using CSS
• CSS3 Repeat Radial Gradients
• CSS3 Linear gradients
• Setting Direction of Linear Gradients using Angles in CSS
• Creating Linear Gradients using Multiple Color Stops in CSS
• Using the CSS3 Linear and Radial Gradients
• Repeat the background image with CSS
• Repeat a radial gradient with CSS
• Types of Gradients in CSS
• CSS border-image-repeat
• Background Repeat in CSS
• Background Repeat Using CSS
• Create a differently spaced Color Stops with CSS Radial Gradients
• Create an evenly spaced color stops with CSS Radial Gradients