CSS Formatter / Minifier

Format CSS, SCSS and Less, or minify CSS stylesheets.

How to use the CSS Formatter and Minifier

1. Paste CSS, SCSS or Less and pick the Language, or click Sample.
2. Choose the indentation; the formatted stylesheet appears instantly.
3. Switch to Minify to shrink CSS for production and see how many bytes you save.
4. Syntax errors, such as a missing closing brace, are shown with their line.

How minification works

• Whitespace and comments are removed; /*! … */ license comments are kept, as build tools do.
• Values get shorter forms where they mean the same: #ff0000 becomes red, 0px becomes 0.
• Merge and reorder rules also combines rules with the same declarations, e.g. .a{color:red}.b{color:red} into .a,.b{color:red}. It's smaller but changes rule order, so it's off by default.

Frequently asked questions

Which tools does this use?

Formatting uses Prettier; minifying uses CSSO. Both run in your browser.

Can I minify SCSS or Less?

Not directly: variables, nesting and mixins must be compiled to CSS first. You can still format SCSS and Less here.

Is my stylesheet uploaded?

No. Everything happens in your browser.