CSS Beautifier & Minifier
Format messy or minified CSS into clean, readable stylesheets — or compress formatted CSS to shrink file size. Adjust indentation, selector formatting, and comment handling. Everything runs in your browser; your code is never uploaded.
About this tool
CSS stylesheets often end up in two states where they're hard to work with: minified (no whitespace, one line, hard to read) or inconsistently formatted (mixed indentation, weird line breaks, leftover dead rules). This tool handles both directions:
- Beautify expands compressed CSS into a readable layout using the mature
js-beautifylibrary. Indentation, selector formatting, and spacing between rules are all configurable. - Minify strips comments and unnecessary whitespace to reduce the bytes served to your users — useful for shipping production CSS when you don't have a build step.
The tool handles standard CSS as well as SCSS-like nested syntax, media queries, keyframes, and CSS variables. All processing happens locally in your browser.
How to use
- Paste your CSS into the input pane on the left.
- Pick your indentation and formatting options from the toolbar.
- Click Beautify to format, or Minify to compress.
- Copy the result, download it as a
.cssfile, or click Use as input to chain operations.
Frequently asked questions
Is my CSS uploaded anywhere?
No. Both the beautifier and the minifier run entirely in your browser using client-side JavaScript. Your code never leaves your device, and nothing is logged.
How much does minifying actually save?
For typical hand-written or unminified stylesheets, expect 20–40% size reduction after minification, mostly from removing comments, indentation, and newlines. On already-compact CSS the savings are smaller. The output pane shows the exact byte delta.
Will the minifier break my CSS?
The minifier only removes whitespace, comments, and a trailing semicolon at the end of each rule block. It does not rewrite selectors, merge rules, or reorder properties, so the output is behaviorally identical to the input. For aggressive optimizations like property merging or unused-rule removal, use a dedicated build tool like cssnano or PostCSS.
Does it support SCSS or LESS?
It formats SCSS-style nested rules and line comments (//) well enough for casual use, but it is not a SCSS compiler. For real SCSS/LESS workflows, compile to CSS first, then format here if needed.
What about CSS variables, @supports, and modern syntax?
Fully supported. Custom properties (--var), @supports, @container, nesting, :is()/:where(), and color-mix() all pass through correctly in both beautify and minify modes.
Can I minify CSS that contains a URL with a comment-like sequence?
Yes. String literals (inside url(), content, etc.) and real CSS comments are handled separately, so /* characters inside quoted strings are preserved as-is.