LESS - svg gradient Function



The svg-gradient is a transition of one color to another. It can add many colors to the same element. It consists at least three parameters −

  • first parameter identifies the gradient type and direction.

  • other parameters list its position and color.

The colors specified at first and last position are optional. The direction can be set - to bottom, to right, to bottom right, to top right, ellipse or ellipse at center.

Parameters - colors stops in list −

  • list − lists all colors and their position.

  • escaped value or list of identifiers − sets the direction.

Parameters - color stops in arguments−

  • escaped value or list of identifiers − sets the direction.

  • color[percentage] pair − first color and its respective position.

  • color percent pair − second color and its respective position.


The following example demonstrates the use of svg gradient in the LESS file −


<!doctype html>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />

      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>

create the style.less file.


.style {
   @style: orange, green 30%, #LESS520;
   background-image: svg-gradient(ellipse, @style);

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −


.style {
   background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F


Follow these steps to see how the above code works −

  • Save the above html code in the misc_example.htm file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Misc Function