Beautify CSS to debug, minify CSS to ship
Production CSS is often one line. Beautify it when you are tracing a cascade issue. Minify a snippet when you want a before/after byte count without running a full build.
This page is only CSS. JavaScript has its own JavaScript Minifier & Beautifier. HTML has a sibling page so the articles and libraries stay honest.
See MDN CSS for language rules this tool does not teach.
What this tool changes and what it does not
Beautify adds indentation and line breaks through Prettier. Minify removes comments (unless you keep them) and collapses whitespace in the page. It does not rewrite selectors or merge rules the way a full build minifier might.
It does not add vendor prefixes, resolve @import, compile Tailwind, or rewrite your design tokens.
Reading the size comparison
The output label shows input bytes, output bytes, and a percent change. A negative percent means the file grew, which can happen if you beautify minified CSS. That is expected.
If two minifiers disagree on size, they probably also disagree on shorthand merging. Trust your production pipeline for the file you ship.
Common use cases
- Expand a minified email CSS block
- Check how large a utility snippet is before inlining it
- Normalize a design-token file before a review
How to use
- Paste CSS and choose Beautify or Minify.
- Leave Live Convert on for small snippets.
- Copy or download
.css.
Privacy
Processing stays in the browser.
Frequently Asked Questions
Which libraries does this use?
Beautify uses Prettier with the PostCSS parser. Minify is a conservative in-browser pass that removes comments and extra whitespace. Neither is Autoprefixer or a Tailwind compiler.
Why did property order change after minify?
This minifier does not reorder properties or merge rules. It only strips comments and extra whitespace. If you compared the result with another minifier, that tool may have rewritten shorthand.
Can I keep comments?
Yes. Turn on Keep comments before minify if you still need license headers.
Does this compile Tailwind or Sass?
No. Paste CSS, not a Tailwind source file or a .scss tree.
Is the CSS uploaded?
No. Prettier and the in-browser minify pass run in the page.