Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Sep 19, 2018

how can we inject this mixin in our html element?

@BarbzYHOOL

This comment has been minimized.

Copy link

commented Sep 21, 2018

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
You can’t perform that action at this time.