Skip to content

Instantly share code, notes, and snippets.

@jcemer
Created July 17, 2012 17:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jcemer/3130835 to your computer and use it in GitHub Desktop.
Save jcemer/3130835 to your computer and use it in GitHub Desktop.
Less gradient mixins
#gradient {
.vertical(@startColor: #555, @endColor: #333, @colorStop: 100%) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor @colorStop); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor @colorStop); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 @colorStop, from(@startColor), to(@endColor)); // Android 2.3, Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor @colorStop); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor @colorStop); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor @colorStop); // The standard
}
.vertical-noise(@noise, @startColor: #555, @endColor: #333, @colorStop: 100%) {
background-color: mix(@startColor, @endColor, 60%);
background-image: @noise, -moz-linear-gradient(top, @startColor, @endColor @colorStop); // FF 3.6+
background-image: @noise, -ms-linear-gradient(top, @startColor, @endColor @colorStop);
background-image: @noise, -webkit-gradient(linear, 0 0, 0 @colorStop, from(@startColor), to(@endColor)); // Android 2.3, Safari 4+, Chrome 2+
background-image: @noise, -webkit-linear-gradient(top, @startColor, @endColor @colorStop); // Safari 5.1+, Chrome 10+
background-image: @noise, -o-linear-gradient(top, @startColor, @endColor @colorStop); // Opera 11.10
background-image: @noise, linear-gradient(top, @startColor, @endColor @colorStop); // The standard
}
.radial(@innerColor: #555, @outerColor: #333, @pos: center, @colorStop: 100%) {
background-image: -moz-radial-gradient(@pos, circle, @innerColor, @outerColor @colorStop); // FF 3.6+
background-image: -ms-radial-gradient(@pos, circle, @innerColor, @outerColor @colorStop); // IE10
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); // Android 2.3, Safari 4+, Chrome 2+
background-image: -webkit-radial-gradient(@pos, circle, @innerColor, @outerColor @colorStop); // Safari 5.1+, Chrome 10+
background-image: -o-radial-gradient(@pos, circle, @innerColor, @outerColor @colorStop); // Opera 11.10
}
}
@tosunilgupta
Copy link

how can we inject this mixin in our html element?

@BarbzYHOOL
Copy link

lol i wanted to answer you tosunil but I saw you're a crazy pro http://tosunilgupta.in/ so you don't need help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment