Less Css 3 color linear gradient

/ Published in: CSS
Save to your folder(s)

Use as follow in you style.less file :

.linearGradient(0, #fff, 50%, #ccc, 100%, #fff);

Copy this code and paste it in your HTML
  1. .linearGradient(@stop1:0, @color1:#ccc, @stop2:50%, @color2:#ddd, @stop3:100%, @color3:#ccc){
  2. background-color:@color2;
  3. background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
  4. background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  5. background:-ms-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  6. background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  7. background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  8. -pie-background: linear-gradient(@color1, @color2, @color3);
  9. filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color3));
  11. }

URL: http://lostwebdesigns.com

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.