CSS Gradients have pretty messy syntax, made even worse once you add vendor prefixes. So, in this tutorial, we’re going to make Gradient color generation more intuitive with a LESS Mixin. Our Mixin will cater for three types of CSS gradients, namely linear , radial , and repeating . We will have a couple of settings to manipulate the gradient output, including the gradient type, the color combination and the gradient orientation. Here’s a demo of something we’ll be able to create with the resultant mixin: Now let’s see how we build it! CSS Gradient Syntax To begin with, we’ll examine the syntax that forms the three gradient types, eventually helping us to drive our Mixin. // 1. linear gradient background-image: linear-gradient(90deg, #ED4264, #FFEDBC); // 2. radial gradient background-image: radial-gradient(circle, #ED4264, #FFEDBC); // 3. repeating (linear) gradient repeating-linear-gradient(90deg, #ED4264, #FFEDBC); These are the CSS gradient syntax forms, as per W3C standard.
↧