CSS Formatter & Minifier
Beautify CSS with one rule per line and indented at-rules, or minify it by stripping comments and whitespace. String- and url()-safe.
Beautify puts one selector or declaration per line and indents nested at-rules; minify strips comments and whitespace and drops the last semicolon in each block. The formatter is a character scanner, not a full CSS parser: it is safe with braces and semicolons inside strings and url(), but it will not repair invalid CSS. Everything runs in your browser.
Beautifying and minifying CSS, safely
CSS has a simple grammar — selectors, a brace-delimited block, and semicolon-separated declarations — which makes it easy to reflow. Beautify mode puts each selector in a comma list on its own line, each declaration on its own line with a single space after the colon, and indents the contents of nested at-rules like @media and @supports. Minify mode removes comments and every optional space and newline, collapses whitespace around combinators, and drops the last semicolon before each closing brace.
The one place naive formatters break is strings and url(). A declaration like content: "}" or a background with a data URI contains braces, semicolons and colons that are not structural. This formatter is a character scanner that tracks whether it is inside a string or a comment, so those characters are passed through untouched. It is deliberately not a full CSS parser: it will not tell you a property name is misspelled or a value is invalid, and it will not repair unbalanced braces.
Minifying here is conservative — it only removes what is safe to remove. It does not merge duplicate rules, shorten hex colours, collapse margin/padding shorthands, or strip declarations that are overridden later. Those are the job of a dedicated optimising minifier (cssnano, Lightning CSS) that understands the cascade. For shipping a build, use one of those; this tool is for quick hand cleanups and for reading a minified file.
Preprocessor input (SCSS, Less) partly works: plain nesting and standard at-rules format fine, but $variables, mixins, &-parent references and @if/@each are not understood and may come out wrong. Compile to CSS first for dependable results. Comments, including license headers, are removed in both modes — re-add anything you need to keep.
All formatting runs in your browser. Nothing is uploaded and the tool works offline.
Key formulas (reference)
beautify: selector {\n prop: value;\n …\n} (nested at-rules indented one level)
minify: strip /* */ and whitespace, tighten > + ~ , and drop the final ";" in each blockRelated tools
These free tools pair well with this page — open them in a new tab to finish your workflow.
Frequently Asked Questions
What is the difference between beautify and minify?
Beautify expands CSS for reading and editing: one selector per line in a comma list, one declaration per line, indented nested at-rules. Minify does the opposite — it removes comments and all non-essential whitespace and drops the final semicolon in each block — to make the file as small as possible for production.
Will it break CSS that has braces or semicolons inside strings?
No. The formatter is a character scanner that tracks string and comment state, so content: "}" or a data URI containing ; and {} is left untouched. It is not a full CSS parser, though, so it will not detect or repair invalid syntax.
Does minifying change how my CSS behaves?
It should not. Only whitespace and comments are removed; selectors, properties and values are preserved exactly, including the space inside multi-word values like margin: 0 auto. It does not merge rules, shorten colours, or remove unused declarations — those are optimisations a dedicated minifier does.
How are comments treated?
Beautify and minify both remove /* … */ comments. If you need to keep a license header, add it back after formatting.
Can I format SCSS or Less?
Partly. Plain nesting and standard at-rules format fine, but preprocessor-specific syntax (variables with $, mixins, &-parent selectors, @if/@each) is not understood and may not come out as expected. Compile to CSS first for reliable results.
What indent options are there?
Two spaces (the default), four spaces, or a tab per level. The choice only affects beautify output.
Is my CSS uploaded?
No. All formatting runs in your browser and the tool works offline.