a toolbox for the web.

Less to CSS Converter

To use this Less to CSS converter paste your Less code into the editor in the left and use the options in the centre to get your CSS output.

What is this tool?

It is an online Less to CSS tool that makes it easy to convert any amount of Less code to CSS instantly.

Less needs to be compiled into plain CSS before it can be properly interpreted by browsers. If you need a way to achieve this online my tool should be just what you have been looking for as it uses the official Less compiler. As well as compiling Less you also have the option to minify the output if you are uploading directly to a production server.

Example Less

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

Converted CSS

a,
.link {
  color: #428bca;
}
a:hover {
  color: #3071a9;
}
.widget {
  color: #fff;
  background: #428bca;
}

The above example demonstrates what this tool does.