Quick answer: CSS Minifier is a free online tool that lets you remove comments and redundant whitespace from your CSS to cut file size without changing a single style. Byte-saved summary included. No account or install needed — it runs entirely in your browser, free.
Remove comments and redundant whitespace from your CSS to cut file size without changing a single style. Byte-saved summary included. Free, no signup, fully local.
What is the CSS Minifier?
CSS minification strips everything the browser’s CSS parser does not need: comments, line breaks, indentation, spaces around braces, colons, and semicolons. Selectors, properties, and values survive untouched, so the rendered page is pixel-identical while the stylesheet downloads faster. This CSS minifier online does it conservatively and tells you exactly how many bytes you saved.
The minifier is careful where it matters. String values in content properties and url() references are preserved character-for-character, so icon fonts and quoted text keep working. Whitespace that CSS actually requires — like the space between a selector and a combinator, or inside calc() expressions — is left alone.
A trailing comment on the output reports bytes and percentage saved, making it easy to compare before and after. Processing happens entirely in your browser: no signup, no upload, safe for proprietary stylesheets.
Minification also simplifies debugging production issues. When a minified stylesheet misbehaves, the byte-saved summary tells you the output is structurally identical to the source — so any rendering difference comes from deployment, such as a wrong file version or caching, rather than the minify step itself. That certainty turns did-minification-break-it from a mystery into a two-minute check.
How to use the CSS Minifier
Paste your stylesheet into the input box.
Click Minify CSS to remove comments and collapse whitespace.
Copy the compact output or download it as a .css file.
Read the trailing summary comment for exact bytes saved.
Link the minified file in production; keep the readable original for editing.
CSS Minifier use cases
Cutting render-blocking CSS
Stylesheets block first paint. A minified critical CSS file reaches the browser sooner, improving Largest Contentful Paint on every page load.
Shrinking theme files
WordPress themes and UI frameworks ship thousands of lines of CSS. Minifying before deployment routinely saves 20–40% with zero visual change.
Optimizing email styles
HTML email clients are picky and inboxes penalize bulk. Compact inline-adjacent stylesheets keep campaigns light and fast.
Cleaning development builds
Preprocessors output readable but verbose CSS. Run the compiled result through the minifier as the last step before shipping.
Tips
Always keep the unminified source — debugging minified CSS without source maps is miserable.
Comments with licenses or attribution are removed too; preserve required notices elsewhere if needed.
Combine minification with gzip on your server — they stack for much bigger total savings.
Check the byte-saved summary to prioritize which stylesheets are worth optimizing.
Frequently asked questions
Will minifying break my styles?
No. The minifier only removes comments and insignificant whitespace; selectors, properties, values, and at-rules are preserved exactly. Whitespace that CSS requires — inside calc(), between selector combinators — is kept. The conservative approach means slightly larger output than aggressive optimizers produce — a fair trade for zero behavioral risk.
What about whitespace inside strings and url()?
String contents, including content: "..." values and url() paths, are passed through untouched, so icon fonts, quoted text, and asset references keep working. Quoted font names, data URIs, and asset paths all survive minification exactly as you wrote them, with no exceptions.
How much smaller does CSS get?
Typically 20–40% for readable stylesheets, more for heavily commented ones. Every output ends with a summary comment showing exact bytes and percentage saved. Utility-first frameworks with long class lists often compress even better once gzip is applied on top. The exact figure for your file appears in the summary comment appended to every output.
Are !important declarations preserved?
Yes. !important, custom properties (--vars), media queries, and keyframes are all structural CSS and pass through unchanged. Specificity and cascade order are untouched, so the minified stylesheet behaves identically in every browser. Your carefully tuned specificity battles remain exactly as you left them.
Should I also gzip my CSS?
Absolutely — minification and gzip stack. Minify first to remove redundancy, then let the server's gzip/brotli compression squeeze the repetitive remainder. Most hosts enable compression with a single toggle — combine it with minification and CSS payload becomes a rounding error.
Is my stylesheet uploaded anywhere?
No. Minification runs entirely in your browser. Proprietary theme code never leaves your device, and there is no signup. Design systems and client theme files can be pasted freely; the bytes never leave your machine. Feel free to verify with browser devtools — minification triggers zero network activity.
Can it minify SCSS or Less directly?
No — compile preprocessors to plain CSS first, then minify the compiled output here. Most preprocessor CLIs have a compressed output flag, which is the natural place to minify if you already compile. Paste the compiled CSS output here as the final step before deployment.
Will it merge duplicate selectors or remove unused CSS?
No — this is a safe whitespace-and-comment minifier, not an optimizer. It never restructures rules, so there is zero risk of it changing cascade behavior. For dead-code elimination and rule merging, use PurgeCSS or Lightning CSS in your build. If you want those deeper optimizations later, add them as a separate build step where the riskier transforms belong.
Are CSS variables and calc() safe?
Yes. Custom properties are passed through untouched, and whitespace inside calc() expressions — which CSS requires around + and - — is preserved. Only truly redundant whitespace is removed. Edge cases like these are exactly why a conservative minifier beats a clever one for quick one-off jobs.
My file uses @charset or @import — are they kept?
Yes. At-rules stay exactly where they are, in order. Just remember @import must remain the first rule in the file to stay valid — minification preserves order, so it will. Font-face declarations, keyframes, and media queries are likewise preserved in their original order and structure.