LESS CSS mixins Collection

mixins.less

.border-radius(@radius:15px)
{
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius;
}

.multi-rounded-corners(@topLeft: 5px, @topRight: 5px, @bottomRight: 5px, @bottomLeft: 5px)
{
  -webkit-border-radius: @topLeft @topRight @bottomRight @bottomLeft;
  -moz-border-radius: @topLeft @topRight @bottomRight @bottomLeft;
  border-radius:@topLeft @topRight @bottomRight @bottomLeft;
}

.vertical-gradient(@from: #000, @to: #FFF)
{
  background: @from;
  background: -webkit-gradient(linear, 0 bottom, 0 top, from(@from), to(@to));
  background: -webkit-linear-gradient(@from, @to);
  background: -moz-linear-gradient(-90deg, @from 0%, @to 100%);
  background: -moz-gradient(center top, @from 0%, @to 100%);
  background: linear-gradient(@from, @to);
  -pie-background: linear-gradient(@from, @to); 
}

.box-shadow(@offset-x:3px, @offset-y:3px, @blur-radius:3px, @spread-radius:3px, @color:#cccccc)
{
  -webkit-box-shadow:@offset-x @offset-y @blur-radius @spread-radius @color;
  -moz-box-shadow:@offset-x @offset-y @blur-radius @spread-radius @color;
  box-shadow:@offset-x @offset-y @blur-radius @spread-radius @color;
}

.inset-box-shadow(@offset-x:3px, @offset-y:3px, @blur-radius:3px, @spread-radius:3px, @color:#cccccc)
{
  -webkit-box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
  -moz-box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
  box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
}
 
.text-shadow(@offset-x:3px, @offset-y:3px, @blur-radius:3px, @color:#fff)
{
  text-shadow:@offset-x @offset-y @blur-radius @color;
  /* ie */
  filter: glow(color=@color,strength=@blur-radius), alpha(opacity=70);
}

.multi-color-border(@top, @sides, @bottom) {
  border-top: 1px solid @top;
  border-left: 1px solid @sides;
  border-right: 1px solid @sides;
  border-bottom: 1px solid @bottom;
}

.css3pie() {
  behavior: url(PIE.htc);
}

very nice collection.

One tip though, you can use the @arguments to shorten the multi-rounded-corners, as such:

.multi-rounded-corners(@topleft: 5px, @topright: 5px, @bottomright: 5px, @bottomleft: 5px)
{
-webkit-border-radius: @arguments;
-moz-border-radius: @arguments;
border-radius:@arguments;
}

It's a very handy keyboard.