CSS Minifier
Squeeze every redundant byte out of your stylesheets — comments, whitespace and duplicate rules gone — so pages paint faster without touching how they look.
What a CSS minifier actually does
A CSS minifier rewrites a stylesheet to be as small as possible while producing byte-for-byte identical rendering. The obvious wins are stripping comments and the whitespace you added for your own readability. The less obvious wins matter more: collapsing 0px to 0, shortening #ffffff to #fff, and dropping the final semicolon in each block.
This tool runs on csso, which doesn't just delete characters — it builds a model of your stylesheet and performs structural optimisations. Identical declaration blocks can be merged, and adjacent rules with the same selector can be combined, which a naive find-and-replace minifier would never catch.
Everything happens in your browser. Your design-system CSS, including any internal class names, is never sent anywhere — close the tab and it's gone.
Minifying a stylesheet in four steps
- 1
Drop in your CSS
Paste the stylesheet into the left pane, or upload a .css file straight from disk.
- 2
Read the compressed output
csso processes the input as you type and shows the minified result on the right.
- 3
Check the byte savings
The character counter under each pane tells you exactly how much smaller the output is.
- 4
Ship it
Copy the minified CSS to your clipboard or download it as a .css ready for production.
Why it's worth doing
Faster first paint
Smaller CSS means the browser downloads and parses your styles sooner, so content appears quicker.
Smarter than a regex
csso merges duplicate blocks and shorthand values, going well beyond just removing spaces.
Lower bandwidth bills
Fewer bytes per request adds up across millions of page views, especially on CDN-metered plans.
Private by default
Proprietary CSS stays on your machine — nothing is transmitted to a server for processing.
Before and after
A commented, spaced-out rule on the left; the csso output on the right.
/* primary button */
.btn {
color: #ffffff;
background: #0070dc;
padding: 8px 16px;
}
.btn:hover {
background: #005bb5;
}.btn{color:#fff;background:#0070dc;padding:8px 16px}.btn:hover{background:#005bb5}Minify for production, keep the readable source
The golden rule: never edit minified CSS by hand. Keep your authored, commented stylesheet in version control and treat minification as a build-time output. When you need to read or tweak production CSS, run it through a CSS beautifier first, make your change in the source, then re-minify.
What gets optimised
- Comments (
/* … */) are removed entirely. - Whitespace, indentation and blank lines are collapsed.
- Colours and lengths are shortened where it's safe (
#ffffff→#fff,0px→0). - Duplicate and adjacent rules with matching selectors are merged.
- The trailing semicolon in each declaration block is dropped.
Frequently asked questions
No. csso only applies transformations that are guaranteed to preserve the computed styles. The bytes shrink; the visual result is identical.
A whitespace remover only deletes spaces and comments. csso parses the stylesheet and can additionally merge duplicate blocks, combine selectors and shorten values, so it usually produces smaller output.
No. Detecting unused rules requires analysing your HTML and JavaScript, which a standalone minifier can't see. Use a tool like PurgeCSS in your build for that; this tool focuses on compressing the CSS you give it.
Whitespace and comments can't be restored, but you can re-indent minified CSS with our CSS Beautifier to make it readable again. That's why you should always keep your original source.
There's no hard limit — minification runs in memory in your browser, so very large stylesheets are bounded only by your device's available RAM.
Yes. Custom properties, media queries, at-rules and keyframes are all understood and preserved correctly during minification.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.