CSS Minifier

CSS is a render-blocking resource: the browser will not paint your page until it has downloaded and parsed the stylesheets in the document head. That makes CSS size disproportionately important compared with, say, an image below the fold, and it is why stylesheet weight feeds directly into Largest Contentful Paint. Minification is the easy part of the fix. The larger wins usually come from shipping less CSS in the first place — removing rules for components a page does not use, splitting a giant global stylesheet, and inlining the small amount of CSS needed for the initial view.

Minifying compresses the text of your stylesheet; it does not make the stylesheet smarter. It will not delete rules that no element on your site matches, merge two selectors that share identical declarations, or drop vendor prefixes you no longer need for the browsers you support. Those are the changes that shrink a large stylesheet meaningfully, and they need tools that understand your markup — a coverage report in browser devtools is the usual starting point for finding unused CSS.

For a hand-written stylesheet with normal indentation and comments, expect somewhere between 20% and 40% off the raw file size. Heavily commented files do better; files that are already compact do worse. The number shown under the output is the real measurement for your file, so you do not have to guess. Bear in mind that gzip or Brotli compression — which your server almost certainly applies — already removes much of the redundancy that minification targets, so the saving on the wire is smaller than the saving on disk.

Yes. Minification only removes characters the CSS parser ignores: comments, newlines, indentation, and spaces that are not required to separate tokens. Browsers parse the result identically. The tool deliberately leaves alone the spaces that do carry meaning, such as those inside descendant selectors and multi-value shorthand properties, because collapsing those would change what the CSS means.

If you have a build step, minify there — a tool like Lightning CSS or cssnano will run automatically on every deploy and can do deeper optimisations such as merging duplicate rules. Minifying by hand is for the cases where a build step does not exist or is not worth setting up: a landing page, an email template, a CMS theme field, a snippet you are pasting into a third-party platform, or a quick check of how large a file would be if it were compressed.

Open-source licences frequently require the attribution notice to survive in distributed code, and that notice normally lives in a comment at the top of the file. If you are minifying third-party CSS, check its licence before stripping comments. The toolbar toggle exists precisely so you can compress everything else while leaving those banners intact.

No. Every one of these tools runs entirely in your browser using JavaScript. Your stylesheet is never uploaded, never logged, and never sent to any server — you can confirm this by opening your browser devtools Network tab while you work, or by disconnecting from the internet after the page loads and watching everything continue to function. That makes it safe to paste proprietary or client CSS.