CSS Minifier
Minify CSS by removing unnecessary formatting whitespace while preserving selectors, values, and modern syntax.
Minified CSS will appear here.How to minify CSS
- Paste CSS in the input panel.
- Click Minify CSS.
- Copy or download.
What this CSS minifier does
- Removes formatting whitespace between tokens.
- Removes ordinary comments.
- Removes spaces around structural punctuation.
- Preserves the space in descendant combinators.
What this minifier does not do
- Reorder declarations.
- Merge rules or selectors.
- Shorten values.
- Compile Sass, SCSS, or Less.
When CSS minification is useful
Minifying pays off before shipping a stylesheet to production: fewer bytes means less for a browser to download and parse, which matters most for larger stylesheets, render-blocking CSS loaded early in the page, or CSS served to visitors on slower connections.
What gets removed safely
Whitespace between tokens, ordinary comments, and unnecessary spaces around braces, colons, and semicolons are all removed without changing how the CSS is parsed. The space inside a descendant combinator, like the one between two selectors, is kept, since removing it would change what the selector matches.
Minification vs. CSS architecture optimization
Minification only strips bytes that don't affect parsing - it doesn't restructure how a stylesheet is organized. Removing unused selectors, consolidating duplicate rules, or reorganizing a sprawling stylesheet into something more maintainable are separate concerns that minification intentionally leaves alone, since making those changes safely usually requires understanding how the CSS is actually used across a site.
Nesting, browser compatibility, and testing
Native CSS nesting and custom properties are parsed and minified without altering their structure, but browser support for newer syntax still varies. Always load the minified output in a real page before deploying it, particularly for stylesheets that lean on newer CSS features or vendor-specific rules, since a byte-level comparison won't catch a rendering difference.
Frequently asked questions
- Does this CSS minifier upload my code?
- No. Parsing and minification run entirely in your browser.
- Does it remove CSS comments?
- Ordinary comments are removed. /*! */ comments are preserved.
- Is minifying the same as optimizing my CSS?
- No. Minification only removes bytes that don't change how the browser parses the file - whitespace, comments, and redundant punctuation. It doesn't restructure your architecture, remove unused selectors, or merge duplicate rules, which are separate optimization steps.
- Will minifying break native CSS nesting?
- It shouldn't. Nested rules are parsed and minified without flattening or altering their structure. Since nesting support varies by browser, verify your target browsers handle it, or that a build step compiles it beforehand, independent of whether the file is minified.
- Do I need to test minified CSS before deploying it?
- Yes. Minification is meant to be safe, but stylesheets with unusual syntax, vendor-specific hacks, or newer features can behave unexpectedly after any transformation. Loading a minified stylesheet on a real page before shipping it catches issues a byte-level diff wouldn't show.