Live
x
<h2>repeating-linear-gradient()</h2><div class="gradient-repeating"></div><h2>linear-gradient()</h2><div class="gradient"></div>
Live
xxxxxxxxxx25
:root { --yellow: #ffeb3b; --orange: #ff9800;}[class^="gradient"] { width: 200px; height: 200px;}.gradient { background: linear-gradient( var(--yellow), var(--yellow) 10%, var(--orange) 10%, var(--orange) 20% );}.gradient-repeating { background: repeating-linear-gradient( var(--yellow), var(--yellow) 10%, var(--orange) 10%, var(--orange) 20% );}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.