Less.js Misc svg-gradient() Function

Last Updated : 30 Jan, 2023

Less (Leaner Style Sheets) is basically an extension to normal CSS which basically enhances the abilities of normal CSS and provides it programmatic superpowers like variables, functions, etc.

In this article, we are going to take a look at svg-gradient() function in Less.js. This function is used to create multi-stop SVG gradients. Basically, this function is used to create gradients with the help of two or more colors in a particular direction and provide the color gradient to the programmer.

The function requires at least 3 arguments. You can also provide color stops in a list format.

Parameters:

direction: The direction must be one of to bottom, to right, to bottom right, to top right, ellipse, or ellipse at the center. The direction can also be specified using an escaped value like ~”to right”.
first_color [percentage]: The first color value and optional value of percentage can be filled to specify the position of the color.
color [percent]: (optional) the color and its position in percentage. You can specify n number of colors using this format between the first_color and the last_color.
last_color [percentage]: The last color value and optional value of percentage can be filled to specify the position of the color.

You can also specify all the color stops that are colored with their positions in a list and provide that list as the argument.

For example:

@list: green, blue 10%, darkblue.

Syntax:

The syntax of the svg-gradient() function is as follows:

svg-gradient(direction, first_color [percentage],
             color1 percent, color2 percent ... colorN percent, 
             last_color [percentage])

You can also specify the color stops in the list and use the following syntax:

@list: first_color [percentage], 
       color1 percent, color2 percent ... 
       colorN percent, last_color [percentage]
        svg-gradient(direction, @list)

Example 1: In this example, we are going to create a gradient color with the help of blue and green colors in the direction from top to bottom and then specify that as the background image of the div. As there are only 2 colors, we don’t need to specify their position.

styles.less: The LESS code is as follows:

CSS

div{ 
      background-image: svg-gradient(to bottom, blue, springgreen); 
      width: 100px; 
      height: 100px; 
      margin: 0 60px; 
}

Syntax: To compile the above LESS code into normal CSS, run the following command in your terminal:

lessc styles.less styles.css

styles.css: The output CSS file looks like this.

CSS

div { 
      background-image: url( 
'data:image/svg+xml, 
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%
2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3ClinearGradient 
%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%2
20%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%
20stop-color%3D%22%230000ff%22%2F%3E%3Cstop%20offset%3D%22100
%25%22%20stop-color%3D%22%2300ff7f%22%2F%3E%3C%2FlinearGradient 
%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height 
%3D%221%22%20fill%3D%22url(%23g)%22%20%2F%3E%3C%2Fsvg%3E'); 
      width: 100px; 
      height: 100px; 
      margin: 0 60px; 
} 

index.html:

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>GeeksforGeeks | Less.js Misc svg-gradient() Function</title> 
    <link rel="stylesheet" href="/styles.css"> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Less.js Misc svg-gradient() Function</h3> 
    <div></div> 
</body> 
</html>

Output:

Less.js Misc function svg-gradient() example 1

Example 2: In this example, we have 3 colors that we have stored in the @colors list. Then we created a gradient by specifying direction as to right, and @colors as the arguments. Then we set it as the background image of the p tag. The code is as follows.

styles.less: The LESS code is as follows:

CSS

p{ 
  @colors: #0F2027, #203A43 50%, #2C5364; 
  background-image: svg-gradient(to right, @colors); 
  width: 150px; 
  height: 150px; 
  color: white; 
  font-weight: bolder; 
  font-family: sans-serif; 
  text-align: center; 
}

Syntax: To compile the above LESS code into normal CSS, run the following command:

lessc styles.less styles.css

styles.css: The output CSS file looks like the following

CSS

p { 
      background-image: url( 
'data:image/svg+xml, 
 %3Csvg%20xmlns%3D%22http%3A%2F 
 %2Fwww.w3.org%2F2000%2Fsvg%22%
 20viewBox%3D%220%200%201%201%22
 %3E%3ClinearGradient%20id%3D%22g 
 %22%20x1%3D%220%25%22%20y1%3D%220
 %25%22%20x2%3D%22100%25%22%20y2
 %3D%220%25%22%3E%3Cstop%20offset 
 %3D%220%25%22%20stop-color%3D%22
 %230f2027%22%2F%3E%3Cstop%20offset 
 %3D%2250%25%22%20stop-color%3D%22
 %23203a43%22%2F%3E%3Cstop%20offset 
 %3D%22100%25%22%20stop-color%3D%22
 %232c5364%22%2F%3E%3C%2FlinearGradient 
 %3E%3Crect%20x%3D%220%22%20y%3D%220%22
 %20width%3D%221%22%20height%3D%221%22
 %20fill%3D%22url(%23g)%22%20%2F%3E%3C%2Fsvg%3E'); 
      width: 150px; 
      height: 150px; 
      color: white; 
      font-weight: bolder; 
      font-family: sans-serif; 
      text-align: center; 
} 

index.html:

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>GeeksforGeeks | Less.js Misc svg-gradient() Function</title> 
    <link rel="stylesheet" href="/styles.css"> 
</head> 
<body> 
  
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Less.js Misc svg-gradient() Function</h3> 
  
    <p>This is my gradient</p> 
  
</body> 
</html>