How to repeat linear gradients with CSS

CSSWeb DevelopmentFront End Technology

<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>
raja
Updated on 24-Jun-2020 06:10:43

Advertisements