Horizontal lines seem to be all the rage latest.  Not just breaking text up, but they are used to break up H1 and H2 tags…well, hell, ANY HTML tags it seems…

No mind.  Here is a quick video showing a quick CSS to make that HR line look fancy (code below)!

And the CSS.

  • Put this in the BEFORE Custom CSS
  • Change the color in the CSS (the color of the Divider module will not do anything one this CSS is applied)
border: 0; 
height: 1px; 
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

Build Beautiful.