CSS Beautifier

To begin using this online CSS beautifier/formatter paste your CSS into the editor on the right or upload a .css file from your computer.

What is this tool?

It is a simple free online CSS formater that you can use to either beautify CSS markup or minify it. Almost all front-end web developers will have encountered messy CSS code, which in some cases is appalling and unreadable.

This tool will conveniently beautify CSS code so that it is readble and uniform from start to finish. You also have the ability to set the indentation of the syntax as well as the bracing style.

The two styles of CSS bracing look like:

Collapsed:
    .restrict {
      position: relative;
      width: 100 % ;
      display: flex;
    }
Expanded:
    .restrict
    {
      position: relative;
      width: 100 % ;
      display: flex;
    }

Once you have finished formatting you can copy the CSS to clip board VIA the icon on the bottom right, or download a .css file.