CSS Minifier & Beautifier
Compress CSS by removing comments and whitespace, or reformat compact CSS into readable rules — live, entirely on your device.
Runs entirely in your browser — nothing is uploaded. This is a safe textual transform (comments, whitespace, formatting), not a full CSS parser.
How it works
- Paste your CSS into the input box, or type it directly.
- Choose Minify to shrink it or Beautify to reformat it — the output and byte savings update as you type.
- Copy the result to your clipboard or download it as a .css file.
Frequently asked questions
- What exactly does the minifier remove from my CSS?
- It strips comments, collapses runs of whitespace, removes spaces around braces, semicolons, colons and commas, and drops the redundant semicolon before each closing brace. Comments that start with /*! are kept, since that convention marks license headers that should survive minification.
- Can minification break my stylesheet?
- The transform is deliberately conservative: quoted strings are never touched, spaces inside calc() expressions around + and − are preserved, and no values are rewritten or shortened. It is a textual transform rather than a full CSS parser, so for unusual hand-written edge cases it is worth a quick visual check of the output.
- Is my CSS uploaded to a server?
- No. Both minifying and beautifying run as plain string processing in your browser, and the page makes no network requests with your code. That means it is safe to paste proprietary stylesheets, and results appear instantly even for large files.
- How much smaller will my CSS get?
- Typical hand-written stylesheets shrink by 10–30%, depending on how heavily they are commented and indented. Note that if your server already compresses responses with gzip or Brotli, the additional transfer savings from minification are smaller — but minified files still parse marginally faster and cache smaller.
- Can I use the beautifier to read minified CSS from a live website?
- Yes — paste any single-line production stylesheet and Beautify expands it to one declaration per line with two-space indentation, including nested @media and @supports blocks. Selectors get spacing after commas restored, which makes long selector lists far easier to scan.
About this tool
This tool converts CSS between two forms: a compact, production-ready version with every unnecessary byte removed, and an expanded, readable version with one declaration per line. Switch between Minify and Beautify with a single click and the output updates live, alongside a byte count for input and output and the percentage saved, so you can see exactly what the transform is worth before you ship it.
Everything happens locally in your browser using plain string processing — no upload, no server, no network requests. The minifier first protects quoted strings so nothing inside url("…") or content values can be altered, then strips comments and collapses whitespace around punctuation. Spaces inside parentheses around arithmetic operators are left alone, which keeps calc() expressions valid, and comments beginning with /*! survive so license headers stay attached to the code they cover. Because it is a careful textual transform rather than a full parser, it never rewrites, reorders or shortens your actual values.
Typical uses: shrinking a hand-written stylesheet before deploying a static site that has no build pipeline, cleaning the formatting of CSS copied from a blog post or an old project, and un-minifying a production file from a live site so you can actually read it while debugging. The beautifier indents nested at-rules such as @media blocks correctly, which makes responsive breakpoints easy to follow.
A practical tip: if your hosting already serves files with gzip or Brotli compression, minification adds a modest transfer saving on top rather than the full percentage shown — the two techniques overlap. Minify last, after any editing, since the compact form is hard to modify by hand; keep the readable version in your project and treat the minified output as a build artifact you can regenerate here at any time.