<hr />
<h1>Horizontal Rule</h1>
<hr />

h1 {
  text-align: center;
}

hr  {
  margin: 0;
  border: 0;
  height:15px;
  background: #333; /* Chrome,Safari4+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34495e), color-stop(10%,#34495e), color-stop(10%,#207cca), color-stop(24%,#2989d8), color-stop(24%,#34495e), color-stop(42%,#34495e), color-stop(42%,#207cca), color-stop(70%,#207cca), color-stop(70%,#207cca), color-stop(70%,#34495e), color-stop(100%,#34495e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #34495e 0%,#34495e 10%,#207cca 10%,#2989d8 24%,#34495e 24%,#34495e 42%,#207cca 42%,#207cca 70%,#207cca 70%,#34495e 70%,#34495e 100%); /* Chrome10+,Safari5.1+ */
  background-image: -moz-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
  background-image: -o-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
  background-image: linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%); /* Chrome10+,Safari5.1+ */   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js