Skip to content
uencoder
TASK

Minify and beautify CSS

Compress CSS for production (strip whitespace, comments, merge rules) and beautify minified CSS for debugging.

  1. 1

    Minified CSS reduces file size and parse time in production. Beautified CSS is readable for development and debugging. The same source can be minified for deploy and beautified for inspection.

  2. 2
    CSS Formatter →

    Paste CSS. The tool can beautify (indent, one rule per line) or minify (strip whitespace, comments, unnecessary semicolons) depending on the mode.

  3. 3
    HTML Minifier →

    If you are minifying an entire HTML document with inline <style> blocks, use the HTML minifier which handles CSS within style tags as part of the document.

  4. 4

    Keep source maps when minifying for production — they map minified rules back to source for debugging. Preserve critical CSS (above-the-fold) separately from the deferred full stylesheet.

Frequently asked questions

How much does minification save?
Typically 15-30% of file size for well-written CSS, more for verbose stylesheets with many comments. The bigger win is often gzip/brotli compression on top of minification — enable both at the server level.
Will minification change CSS behavior?
Correct minification preserves all selectors, properties, and values — only whitespace, comments, and redundant syntax (trailing semicolons, zero units like 0px→0) are removed. Always diff the beautified minified output against the original to confirm equivalence.

Workflows that solve this

Learn more

Want to understand why?

Related tools