Output appears here...How to use
01
Paste your stylesheet
Drop in a whole file or just a block of rules. The Try sample button loads a short hero-section stylesheet with a comment and a 0px value to demonstrate.
02
Click Minify
The tool removes comments, closes up the whitespace around braces and colons, and rewrites zero units. The green badge above the output reports the percentage saved.
03
Deploy the compact CSS
Copy the one-line result into your production stylesheet or your site's custom CSS field. Rendering is identical; only the bytes change.
Why CSS Minifier
- Paste your stylesheet and minify css in one click. It strips comments, collapses whitespace, and drops redundant zeros.
- Smaller CSS means faster page loads and less to download.
- Runs in your browser. Your code never leaves your device, so you can minify css online with private styles safely.
- Handy as a css minify tool in any workflow, whether you minify my css by hand or wire it into a build.
- Free with no limit and no sign up.
Common questions
What changes when I minify my css here?
Four things: comments vanish, whitespace collapses, units drop off zero values so 0px, 0em, and 0% all become 0, and trailing semicolons before closing braces go away. Selectors, property order, and values otherwise stay exactly as you wrote them.
Is minified CSS rendered any differently by browsers?
No. The parser never cared about your spacing or comments, so the mini css output produces pixel-identical pages. If something looks different afterward, the usual cause is a syntax error that was already in the file, now just harder to see.
Does a whole .css file work, or only snippets?
Whole files are fine, and that's the common minify css file online workflow: open the file, select all, paste, minify, and save the output as styles.min.css. Keep the readable version in your repo and treat the minified one as a build artifact.
How should I minify css in wordpress?
For a live site, an optimization plugin that minifies on the fly is the sustainable route, since it re-processes styles every time a theme updates. For a one-off tweak, paste your stylesheet here and drop the result into Appearance, then Customize, then Additional CSS. Both approaches serve the same bytes.
Why does render-blocking make CSS size matter so much?
Browsers hold the first paint until stylesheets in the head finish downloading and parsing, so CSS sits directly on the critical path. Cutting a 60 KB stylesheet by a quarter removes real latency for every visitor on a slow connection, which is more than most image optimizations can claim.
What if I need to go from minified css to normal again?
Use the CSS Beautifier, which re-indents every rule onto its own lines. The pair covers both directions, so you can go minify to normal css and back as often as needed while editing. Just remember that comments are gone for good once stripped.
Should I still gzip CSS after minifying it?
Yes, they stack. Minification removes characters the compressor would otherwise have to encode, and gzip or brotli then squeezes the remainder. A minified and compressed stylesheet is reliably smaller than either step alone.