 <p><strong>@chipChocolate.py</strong> gave a brilliant solution! This is an improvement based on his.</p> <ol> <li><p>In Firefox <code>transparent</code> behaves like <code>rgba(0,0,0,0)</code> which leaves a thin gray line at the edge. Change to <code>rgba(255,255,255,0)</code> looks better.</p></li> <li><p>Make the visual effect closer to OP's screenshot: 36 strips, each occupies a 10 degree angle.</p></li> <li><p>Effective on <code>&lt;html&gt;</code> tag, like OP's try.</p></li> </ol> <p>BTW: Chrome's render engine sucks, best viewed in Firefox.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html { height: 100%; position: relative; } html:before, html:after { content: ''; height: 100%; width: 50%; position: absolute; top: 0; background-size: 200% 100%; background-image: linear-gradient(85deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(75deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(65deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(55deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(45deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(35deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(25deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(15deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(5deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-5deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-15deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-25deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-35deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-45deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-55deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-65deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-75deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-85deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-95deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db); } html:before { left: 50%; transform: rotate(180deg); }</code></pre> </div> </div> </p>