Quick Answer
A CSS minifier strips comments and squeezes out every byte that does not change how a stylesheet renders: whitespace, trailing semicolons, and space around braces and colons. This free CSS minifier at https://practicalwebtools.com/dev-tools/web/css-minifier shows original and minified byte counts with the percentage saved, and it works both ways — it also beautifies minified CSS back to readable form. String contents are preserved exactly, and everything runs in this browser tab.
How It Works
Paste your stylesheet into the CSS input box
Keep Minify to shrink it — or switch to Beautify with 2 or 4 space indents
Read the byte counts and percent saved, then copy the result
Key Facts
- Two-way: minify to shrink, beautify to make minified CSS readable again
- Byte counts before and after, with the percentage saved
- Strips comments and collapses whitespace without touching selector meaning
- String values in content and url are guarded and preserved verbatim
- Unbalanced braces are reported inline before you ship broken CSS
- Beautify with your choice of 2-space or 4-space indentation
- Runs entirely in this browser tab: your CSS is never uploaded
Frequently Asked Questions
How much smaller will my CSS get?
It depends on how much indentation, comments, and redundancy the file carries. Typical hand-written stylesheets with comments and 2-space indentation shrink 15 to 30 percent; an already-tight file shrinks very little. The live counter shows exact byte counts and the percentage saved for your paste, so there is no guessing.
Does minifying change how my CSS behaves?
No. Only comments, whitespace, trailing semicolons, and space around structural characters are removed. Space before a colon is deliberately kept so a descendant selector like a :hover is never rewritten into a:hover, and string values such as content:"…" are guarded and restored character for character. Media queries, custom properties, and keyframes all pass through unchanged.
Can it undo minification?
Yes. Switch to Beautify and paste the minified CSS back: every rule and declaration goes on its own line with 2-space or 4-space indentation. Round-tripping is safe — minify(beautify(minify(x))) leaves the minified bytes identical.
What happens if my CSS has a mistake?
The tool does not execute CSS, so it cannot judge validity — but it counts braces as you type and reports an inline warning when opening and closing braces do not match, or when one closes before it opens. The output is still produced so you can see what shipped; fix the braces so the browser parses the file.
Is my CSS sent anywhere?
No. All minifying and beautifying happens locally in this browser tab — you can watch the Network tab stay quiet while you type. Nothing is uploaded, logged, or stored; closing the tab discards everything.