Rainbow HR

The old school Rainbow Horizontal Rule GIF recreated in CSS.

by scheinercc

HTML

<!-- Gradient color1 - color2 - color1 -->
<hr class="style-rainbow">

CSS

body {
   padding: 50px;    
}

hr {
   margin: 50px 0;   
}

hr.style-rainbow {
    border: 0;
    height: 40px;
    background: #ff0000;
    background:
    background: linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
}