CSS Beautifier
Beautify or minify CSS with proper nested @media/@keyframes/@supports handling, comment preservation, calc()/var() awareness. Free, client-side.
Format minified CSS into readable code or compact it into minified form. Properly handles nested at-rules (@media, @keyframes, @supports, @layer), calc() / var() with parens, comments, and string literals.
How to Use CSS Beautifier
- Paste your CSS into the Input panel.
- Pick indent style (2 spaces, 4 spaces, or tab) and optional formatting toggles (expand multi-selectors onto separate lines, blank line between rules, preserve comments).
- Click Beautify (or Ctrl+Enter). The tool tokenizes the CSS - respecting strings, comments, and parens - then emits properly-indented output handling nested at-rules correctly.
- Click Minify instead to compact the CSS by stripping whitespace, comments, and trailing semicolons.
- Copy or download. Stats show byte counts and ratio.
Frequently Asked Questions
When should I beautify CSS instead of just reading it minified?
Any time you need to understand structure rather than single values. Debugging specificity issues, reviewing a third-party stylesheet before including it, diffing two versions of a file, and learning how a site achieved an effect all become far easier with one declaration per line and consistent indentation. Browser DevTools can pretty-print too, but a beautifier gives you a persistent, copyable file and lets you re-minify after editing.
How does the tokenizer work?
Walks the CSS character-by-character, tracking 5 token types: text (selectors, properties, values), open ({), close (}), semi (;), comment (/* … */). Strings ("…" / '…') and parens ((…)) are kept inside their enclosing text token – so content: "}"; doesn’t accidentally close a rule, and calc(100% - 20px) doesn’t get split on the inner -.
Does it handle nested at-rules properly?
Yes – the depth counter increments on every { and decrements on every }, regardless of whether the block is a top-level rule, an at-rule, or a nested rule. So @media (min-width: 768px) { .a { color: red; } } formats with .a indented one level deeper than @media.
What about CSS preprocessors (SCSS/Less)?
The tool handles SCSS/Less syntax that’s structurally similar to CSS (nesting, comments, etc.) – but doesn’t understand $variables, @mixin, @function, or other preprocessor-specific syntax beyond passing them through. For full SCSS/Less support, use Prettier or the official preprocessor formatters.
What does the Minify button do?
Reverse operation: strips whitespace, comments, and trailing semicolons before }. The output is functionally identical to the input but smaller (typically 20-40% reduction depending on original formatting). Not as aggressive as cssnano (which also merges duplicate rules, shortens colors, etc.) – for production minification, use a build tool.
What’s “Expand multi-selectors”?
Default: .a, .b, .c { color: red; } stays on one line. With this toggle: each selector goes on its own line:.a,.b,.c { color: red;}
Useful for code review (diffs are cleaner when each selector is its own line).
What if my CSS has unbalanced braces?
The tokenizer ignores depth-tracking on output – it always closes blocks on }, even if there are more } than {. The output may have extra closing braces or be nested deeper than expected. Run it through CSS Lint to catch original issues.
Does it preserve property order?
Yes – the tool only changes whitespace and indentation. Property order, selector order, and rule order are preserved exactly. If you want alphabetical property sorting, use Stylelint or Prettier.
What’s the input size limit?
1 MB. Larger files work in principle but the tokenizer is O(n) per character, and updating a 1 MB textarea live is slow on lower-end devices.
Is anything uploaded?
No. The CSS is processed entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.