Cool horizontal devider in CSS

13 Dec 2014

You can create a cool horizontal devider element (hr) using the below simple css code.

@media screen {
  hr.devider {
    border: 0;
    height: 1px;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    margin: 35px 0 30px 0;
  }
}

Here is a live example.