Line Fade

Apply a gradient or shadow effect within <hr /> horizontal rule lines.

line-fade-[thickness]

line-fade-thin

line-fade-medium

line-fade-thick

<hr class="line-fade-thin" />
<hr class="line-fade-medium" />
<hr class="line-fade-thick" />

Create an hr tag, and apply an .line-fade-[thickness] class. Default 'fade' lines are translucent.

line-fade-black

line-fade-gray

line-fade-white

<hr class="line-fade-thick line-fade-black" />
<hr class="line-fade-thick line-fade-gray" />
<hr class="line-fade-thick line-fade-white" />

Create an hr tag, and apply an .line-fade-[thickness] class, followed by an .line-fade-[color] class. Fade 'color' lines are opaque.

Experiment with other colors, as in this CSS example.


   hr.line-fade-pink {  
     background-image: linear-gradient(to right, rgba(255, 0, 255, 0), rgba(255, 0, 255, 0.5), rgba(255, 0, 255, 0)); 
   }