CSS Minifier & Beautifier

How to use CSS Minifier & Beautifier

1. Paste your CSS into the input box.
2. Pick Minify to compress it or Beautify to format it.
3. Check the bytes before, bytes after and percentage saved shown under the boxes.
4. Copy the result into your build, template or stylesheet file.

Why minify CSS

Every byte of CSS has to be downloaded before a browser can paint the page, because stylesheets block rendering. Removing characters that the browser ignores makes the file smaller and the download a little quicker, which matters most on slow mobile connections.

Minification is only one part of delivering fast CSS. Server compression such as gzip or Brotli usually shrinks text far more, and it works well together with minification. Removing unused rules and splitting critical styles can save even more than whitespace removal.

What this minifier does and does not do

This tool performs conservative, text-level minification. It removes comments, collapses runs of whitespace, trims spaces around braces, semicolons, commas and combinators, and drops the last semicolon before a closing brace. Spaces inside calc() expressions are kept, because CSS requires them around plus and minus operators.

It does not shorten colour values, merge duplicate selectors, remove unused rules or restructure your styles. Dedicated build tools can do those things, but each of them carries a little more risk. If you need that level of optimisation, run the output of a build tool in a real test before shipping.

• Keep your readable source file and publish only the minified copy.
• Test the page after switching to the minified file.
• Use beautify mode to inspect third-party minified CSS.

Beautify mode and privacy

Beautify first normalises the code, then places each rule on its own lines with two-space indentation and one declaration per line. Selector lists are split across lines at commas, and a space is added after the colon in declarations. Ordinary comments are lost in this mode, because the first step removes them.

The tool is not a full CSS parser, so deliberately broken or exotic syntax may be formatted imperfectly. Your stylesheet is processed only inside your browser and is never uploaded or stored.

Why use this css minifier & beautifier tool

• Safe by design. Quoted strings and url() contents are held aside during processing, so spaces inside them are never collapsed.
• Savings report. See original size, minified size and the percentage saved, measured in real UTF-8 bytes.
• Beautify mode. Turn a single-line minified file back into indented rules with one declaration per line.
• Brace check. Warns when opening and closing braces do not match, which usually points to a typo.

Frequently asked questions

More free tools