CSS Beautifier

Format minified or messy CSS into readable, indented code.

What is a CSS beautifier?

A CSS beautifier formats stylesheet code with one declaration per line, consistent indentation and blank lines between rules, making minified or messy CSS easy to read and edit.

Before and after

body{margin:0;color:#333}a:hover{color:red}

becomes

body {
  margin: 0;
  color: #333
}

a:hover {
  color: red
}

Media queries, nested rules, comments and vendor prefixes are formatted too. The tool uses js-beautify's CSS formatter.

When you are done editing, shrink the file again with the CSS Minifier.

Frequently asked questions

Does it work with SCSS or LESS?

Basic SCSS and LESS syntax formats correctly, but advanced features may not be indented perfectly.

Will it change my styles?

No, only whitespace and line breaks change.

Is my CSS uploaded?

No, it is formatted in your browser.