Centered-Vertical-Line-using-CSS3-Gradients.markdown

Centered Vertical Line using CSS3 Gradients

This will create a centered vertical line within any container by using a 3-color horizontal gradient. Uses LESS syntax.

Forked from John Peele's Pen Centered Vertical Line using CSS3 Gradients.

A Pen by Jerry on CodePen.

License.

index.html

<div></div>

style.less

/* Centered Vertical Line - using CSS3 gradients */
.centered-vert-line(@startColor: transparent, @midColor: #ccc, @endColor: transparent, @deg: 180deg) {
  background-image: -moz-linear-gradient(@deg, @startColor, @midColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @midColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @midColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @midColor, @endColor); // Standard, IE10
  background-position: 50%;
  background-repeat: repeat-y;
  background-size: 1px 1px;
 }
 
/* Container */
div {
  width: 50%;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  .centered-vert-line();
}