CSS Minifier
Compress CSS & see bytes saved.
100% private — runs in your browser, nothing is uploaded.
.button{display:inline-flex;padding:8px 16px;color:#ffffff;background-color:#3b82f6}.button:hover{background-color:#2563eb}Original
165 B
Minified
123 B
Saved
25%
Strips comments and whitespace only — selectors, values and strings are never altered. Runs locally in your browser.
How to use the CSS Minifier
- 1Paste your CSS
The full stylesheet or just a snippet.
- 2Read the savings
Original size, minified size and percent saved appear below.
- 3Copy the result
One click copies the minified CSS.
Examples
| Input | Output |
|---|---|
.a {
color: red;
} | .a{color:red} |
/* comment */ p { margin: 0 ; } | p{margin:0} |
Shrink your stylesheets safely
This CSS minifierstrips comments, line breaks, indentation and redundant punctuation from a stylesheet and reports exactly how many bytes you saved. It's deliberately conservative — selectors, property values, strings and calc() expressions pass through untouched — so the minified output behaves identically to the source.
Why minify CSS at all?
CSS blocks rendering: the browser won't paint the page until stylesheets are downloaded and parsed. Every kilobyte trimmed moves First Contentful Paint earlier, which is why “Minify CSS” appears in Lighthouse and PageSpeed reports. Minification stacks with server compression — comments and whitespace are removed before gzip even starts.
For the CSS that build tools don't reach
Modern bundlers minify automatically, but plenty of CSS lives outside a pipeline: CMS “custom CSS” boxes, legacy sites edited by hand, embedded widget styles and HTML emails. Paste, copy, done. For page-speed context, see the color contrast checker for accessible styling and the box shadow generator for building effects.
Frequently Asked Questions
What does a CSS minifier do?
It removes everything the browser doesn't need — comments, line breaks, indentation, redundant spaces and final semicolons — shrinking the file while leaving the rules functionally identical.
How much smaller does minified CSS get?
Typically 15–40% before compression, depending on how heavily commented and indented the source is. Combined with gzip or brotli on the server, stylesheets often end up 80%+ smaller than the raw source.
Can minification break my CSS?
This tool is deliberately conservative: it only strips comments and whitespace and never rewrites selectors, values or strings — so calc() expressions, data URIs and quoted content are safe.
Should I minify manually or in a build tool?
For projects with a build pipeline, use the bundler's minifier. This online tool is for the rest: quick edits to legacy sites, CMS custom-CSS boxes, email styles and checking how much a file would shrink.
Does minified CSS load faster?
Yes — fewer bytes means faster download and parse, which improves First Contentful Paint. It's one of the standard PageSpeed recommendations ('Minify CSS').
Is my CSS uploaded?
No — minification runs entirely in your browser.