CSS Minifier Online: Shrink Stylesheets Without a Build Pipeline
CSS is a render-blocking resource. Before a browser paints a single pixel, it must download and parse every stylesheet in the <head>. A 200 KB stylesheet and a 90 KB minified version of the same file are functionally identical to the browser — but the minified version arrives faster, parses faster, and costs less bandwidth for every visitor on every page load.
This tool minifies CSS directly in your browser. Nothing is uploaded to any server. Paste your stylesheet, click minify, and copy the result.
What CSS minification actually does at the character level
Minification is not magic — it's a set of well-defined text transformations. This tool applies them in sequence:
Comment removal. Every /* … */ block comment is stripped. Section headers, browser-hack notes, license text — gone. Comments can account for 5–20% of a hand-written stylesheet's character count.
Whitespace collapse. Spaces, tabs, and newlines between selectors, properties, and values are removed. .container { padding : 16px ; } becomes .container{padding:16px}. Each newline you remove is one fewer byte to transmit.
Selector and operator compaction. Spaces around structural characters — { } : ; , > ~ + — are eliminated. Descendant selectors like nav > ul > li survive intact; only the surrounding whitespace goes.
Trailing semicolon removal. The last declaration inside a rule doesn't need a semicolon before the closing brace. color:red;} becomes color:red}. Tiny saving per rule, non-trivial across hundreds of rules.
The result is a single continuous line of valid CSS. A typical stylesheet that starts at 80–120 KB commonly lands at 50–70 KB after minification — a 30–50% reduction before server-side compression even enters the picture.
Minification vs. server-side compression
They're complementary, not alternatives. Minification removes redundant characters at the source level. Gzip and Brotli compression then compress the transferred bytes further. A minified file compresses better than an unminified one because the repetitive character patterns in whitespace are already gone.
If your server already sends Brotli-compressed responses, minification still helps: the pre-compression file is smaller, the compression ratio stays the same or improves, and the browser spends less time decompressing and parsing. Run both.
When this tool fits your workflow
Build tools like webpack, Vite, and Parcel have CSS minification built in — typically via cssnano or Lightning CSS. If you're on a project with one of those pipelines, use them.
This tool earns its place in other situations: a static site with no build step, a third-party stylesheet you're self-hosting, a CSS snippet you're embedding inline in an email template, or a quick sanity-check on output size before you commit to a refactor. You paste, you click, you're done — no npm install, no config file, no terminal.
Shorthand properties and selector optimisation
Basic minification handles whitespace and comments. More aggressive minifiers like cssnano also merge shorthand properties (combining margin-top, margin-right, margin-bottom, and margin-left into a single margin shorthand), deduplicate selectors, and remove properties that are overridden later in the cascade. This tool focuses on safe, lossless transformations: what comes out is guaranteed to behave identically to what went in.
If you want to go further, format your CSS first to read it clearly, then identify redundant rules manually before running the minifier. You can also strip CSS comments only without full minification — useful when you want smaller files but prefer to keep some whitespace for debugging in DevTools.
CSS minification and Core Web Vitals
Google's Largest Contentful Paint (LCP) and First Contentful Paint (FCP) metrics are directly affected by render-blocking resources. Lighthouse flags un-minified CSS under "Eliminate render-blocking resources" and "Minify CSS" opportunities. Addressing those flags is one of the faster performance wins available — the change is in your build or deploy process, not in your application code.
For projects that also ship significant JavaScript, pair CSS minification with a JavaScript minifier to reduce the total blocking payload in a single pass.
What to do before you minify
Minified CSS is difficult to edit. Before running this tool on a stylesheet you still need to maintain, make sure you have the original unminified version saved somewhere. A common workflow is to keep a style.src.css (the source you edit) and style.min.css (the minified version you deploy). Never edit the minified file directly — any changes will be overwritten the next time you minify.
If you've lost the unminified source and need to recover it, the CSS formatter can restore readable indentation to a minified file, giving you something workable even if it's not identical to the original. Use that as your new source file, then re-minify when needed. It's not a perfect recovery — comments are gone and variable names won't be expanded — but for standard CSS it's often enough to resume development.