Gradients

Linear gradient

Defaults

Start: left top
End: left bottom
Start color: medium gray
End color: dark gray

.linear-gradient(@start:left top, @end: left bottom, @startColor: #555, @endColor: #333)

Usage

Import the transition mixin into the less file for your site or page:

@import "[path]/mixins/gradients/linear-gradient.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/gradients/linear-gradient.less"

Add a linear gradient to your style(s) using defaults:

.someclass {  
    .linear-gradient();  
}

Add a a diagonal linear gradient, white to black:

.someclass {  
    .linear-gradient(left top, right bottom, #fff, #000);  
}

Browser support

• Chrome
• Safari
• Firefox
• IE10

Working on all above as at 27 Dec 2012

Links

Demo

View the linear-gradient.less file here

Radial gradient

Defaults

Center x: center
Center y: center
Shape: circle
Size: contain Start color: mid gray
Start color position: 0
End color: dark gray
End color position: 100%

.radial-gradient(@centerX: center, @centerY: center, @shape: circle, @size: contain, @startColor: #555, @startPos: 0, @endColor: #333, @endPos: 100%)

Usage

Import the transition mixin into the less file for your site or page:

@import "[path]/mixins/gradients/radial-gradient.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/gradients/radial-gradient.less"

Add a radial gradient to your style(s) using defaults:

.someclass {  
    .radial-gradient();  
}

Add a radial gradient to your style(s), with center offset to 70% / 70% (bottom / right) white starting at 10% to black starting at 90%:

.someclass {  
    .radial-gradient(70%, 70%, circle, cover, #ffffff, 10%, #000000, 90%);  
}  

Browser support

• Chrome
• Safari
• Firefox
• IE10

Working on all above as at 27 Dec 2012

Links

Demo

View the radial-gradient.less file here