DevTools

CSS Formatter

Format and minify CSS, SCSS and LESS.

Input

0 chars

Output

About CSS Formatter

Format stylesheets the way Prettier would, or minify them for size. SCSS and LESS are parsed as themselves, so nesting, mixins and variables are preserved rather than mangled.

Formatting is not linting

This normalises how your CSS is written — indentation, spacing, one declaration per line — and nothing else. It will not reorder properties, merge duplicate selectors or remove rules that do nothing. For that you want a linter such as Stylelint.

What minifying does and does not do

Minification here removes comments and collapses insignificant whitespace, leaving the contents of strings and url() values untouched. It does not rewrite colours, shorten shorthand properties or drop unused rules, which is what a dedicated build tool such as cssnano or Lightning CSS is for.

Frequently asked questions

Why did my comments disappear?
Only in minify mode, which strips them by design. Formatting preserves comments, including the /*! banner form conventionally kept by minifiers.
Does it support CSS nesting and custom properties?
Yes. Native nesting, custom properties, container queries and cascade layers all format correctly, as do SCSS and LESS constructs under their own syntax setting.

Related tools