CSS minifier and beautifier

Minifying makes CSS smaller without changing what it does. The minifier:

• removes comments (except /*! … */ license comments, if you keep them),
• removes line breaks, indentation and extra spaces,
• removes spaces around { } : ; , > where they are not needed,
• drops the last semicolon before a closing brace.

For example:

.header , .nav > a {
  color : #0b7a55 ;
  margin : 0 auto ;
}

becomes .header,.nav>a{color:#0b7a55;margin:0 auto}. Spaces that matter, such as in margin: 0 auto or inside strings and url(), are kept. The tool shows the size before and after, and the percentage saved.

Switch to Beautify to reverse the process. Each rule goes on its own line, declarations are indented with 2 spaces, 4 spaces or tabs, and nested blocks such as @media queries are indented one level deeper.

This is handy when you need to:

• inspect the stylesheet of a website or theme you are customizing,
• debug a production CSS file with no source map,
• clean up CSS that was pasted from different sources with mixed formatting,
• review CSS generated by a design tool.

Beautifying cannot restore comments that were removed during minification.

When you beautify CSS, a consistent style makes stylesheets easier to maintain:

• One declaration per line, ending with a semicolon, even the last one, so adding a line never breaks the previous one.
• A space after the colon: color: red;, not color:red;.
• A blank line between rules in long files, and comments as section headers.
• Lowercase hex colors and property names, or uppercase, but consistently.
• Shorthand where clear: margin: 0 auto; instead of four separate margin properties.

Many teams enforce these rules automatically with a formatter like Prettier and a linter like Stylelint, so code reviews can focus on what the styles do rather than how they are typed.

Typical savings are 15–30% of the original size for hand-written, well-commented CSS, and less for CSS that was already compact. On top of that, web servers and CDNs compress text files with gzip or Brotli, which typically shrinks CSS by 70–80% more.

Minifying and compression work together: minified CSS still compresses well. Even if the saving looks small, CSS blocks page rendering, so every kilobyte you shave off the critical stylesheet helps the page appear sooner, especially on slow mobile connections.

• Keep the readable source. Edit the original file, and minify as a build step. Never edit the minified file directly.
• Keep license comments (/*! … */) for third-party code. Many open-source licenses require the notice to stay with the code.
• Use a build tool for real projects. Bundlers like Vite, webpack or esbuild minify automatically and also remove unused code. This tool is ideal for quick one-off jobs, WordPress custom CSS, email templates and snippets.
• Check the result. After minifying, load the page and make sure nothing changed visually. A missing semicolon in the original can cause trouble once line breaks are gone.

Need the same for other files? Try the HTML formatter or the JavaScript formatter.