CSS Minifier
Stylesheets ship to every visitor, so their size is on the critical path for page rendering. Stripping the comments, indentation and line breaks that exist purely for the author cuts real bytes off that download, and the tool reports exactly how many.
It works both ways: minify for a quick size check, or beautify a minified file when you need to read it. What it does not do is parse your CSS into selectors, declarations and values the way a real build-chain minifier does, which matters for a few specific cases covered below.
Runs in your browser. CSS Minifier processes your input on your own device. Nothing you enter or upload is sent to a server.
Did this tool help you? ☕
WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.
(opens in a new tab)How to use the CSS Minifier
- Paste your CSS into the input area.
- Choose Minify or Beautify.
- Check the original size, minified size and percentage saved.
- Review the output, then copy it.
What the minifier actually does
Minify strips /* */ comments, collapses runs of whitespace to a single space, then removes the space around {, }, ;, : and , and the final semicolon before a closing brace. Beautify runs roughly the reverse: it adds a line break and indentation after each {, ; and }, but it does not add a missing semicolon, add a space after a colon, or strip existing comments.
Both operate on the CSS as text, matched with regular expressions, rather than on a parsed tree of selectors and declarations. For well-formed, ordinary CSS that distinction rarely matters. It starts to matter in the two cases below.
Where whitespace is part of the syntax
A space between two selectors is not just formatting: it is the descendant combinator. ".card :hover" selects any hovered element inside .card. ".card:hover" selects .card itself, only while it is hovered. Those are different rules that match different elements, and the minifier's whitespace-collapsing step removes that space without knowing the difference, as the first example below shows.
The second example shows a related issue from another angle: the comment-stripping pass matches the characters /* and */ wherever they appear, including inside a quoted string, so content meant to be displayed literally is deleted. The same lack of string-awareness means a value with deliberate repeated spaces, such as content: "a b", gets collapsed to a single space.
A selector whose meaning depends on a space
Input
.card :hover { color: red; }Output
.card:hover{color:red}Text that merely looks like a comment, inside a string
Input
p::before { content: "/* not a comment */"; }Output
p::before{content:""}Things worth knowing
- This is a regex-based minifier, not a CSS parser: it works on the raw text, not on selectors, declarations and strings as distinct structures.
- A space that is part of a selector's meaning, such as the descendant combinator in '.card :hover', can be removed, which changes which elements the rule matches.
- Comment-removal and whitespace-collapsing are not aware of quoted strings, so text inside a CSS string that contains /*, */ or repeated spaces can be altered too.
- There is no cascade, specificity or syntax check. Review and test the output before relying on it, and prefer syntax-aware build tooling for production stylesheets.
Frequently asked questions
Does minifying break my styles?
Usually not. It only removes comments and whitespace, and it never renames a class, reorders a declaration or merges rules, so in the ordinary case specificity and cascade order come through unchanged. The exception is whitespace that is itself part of the CSS syntax, such as a space that makes a selector a descendant combinator rather than a compound selector; see the worked example above. Because of that, this is not a guarantee for every input, and you should review the output.
Is the minified CSS safe to deploy straight to production?
Treat it as a quick way to estimate savings or tidy a short stylesheet, then check the result, rather than a drop-in replacement for build-time tooling. It works on the raw text rather than a parsed stylesheet, so it cannot guarantee semantic equivalence the way a syntax-aware minifier such as cssnano or Lightning CSS can. For a production pipeline where correctness matters, use one of those instead.
How much smaller will the file get?
It depends on how heavily commented and indented the source is. Well-documented stylesheets shrink the most. The tool reports the actual original size, minified size and percentage saved for your input.
Is my CSS uploaded?
No. It is processed in your browser.