Faded gradient separator bars

Share on Facebook0Share on Reddit0Tweet about this on TwitterShare on Google+1

Here is a technique for creating both horizontal and vertical separator bars with pure css.

See the Pen Sexyline 2 – verticlal by Michael Jasper (@mdjasper) on CodePen

Using CSS3 radial gradients positioned off element, just the tip of the gradient is show, giving the line a nice shadowed/faded look:

This technique can be applied to <hr>  tags for semantic breaks in content, or they can be applied to any element or class as an effect.

See the Pen Sexyline 2 by Michael Jasper (@mdjasper) on CodePen

Share on Facebook0Share on Reddit0Tweet about this on TwitterShare on Google+1