Useful Gradient LESS Mixin

index.html

<h1>Useful Gradient LESS Mixin</h1>
<pre>
<code>
// Mixin 
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
</code>
</pre>

style.less

// Mixin 
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
 
body {
    .gradient(left, #4ea6ca, #ca4ea6);
    text-align:center;
    color:#ffffff;
} 

pre {
  display:inline-block;
  padding:20px 30px;
  text-align:left;
  border:1px #fff solid;
}

Useful-Gradient-LESS-Mixin.markdown

Useful Gradient LESS Mixin

A Pen by erikokoide on CodePen.

License.