Javatpoint Logo
Javatpoint Logo

Less Color Blending screen()

The Less color blending screen function takes two colors as parameter and displays the output as a brighter color.


  • color1: It specifies a color object.
  • color2: It specifies another color object.
  • Returns: Resultant color

    Screen Function Example

    Let's take an example to demonstrate the usage of color blending screen function in Less file.

    Create a HTML file named "simple.html", having the following data.

    HTML file: simple.html

    Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

    LESS file: simple.less

    Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

    Now, execute the following code: lessc simple.less simple.css

    Less Color blending screen function1

    This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

    For example:

    Less Color blending screen function2

    The generated CSS "simple.css", has the following code:


    Less Color blending screen function3

    Youtube For Videos Join Our Youtube Channel: Join Now


    Help Others, Please Share

    facebook twitter pinterest

    Learn Latest Tutorials


    Trending Technologies

    B.Tech / MCA