What is CSS minification?
CSS minification compresses stylesheet code by removing whitespace, line breaks, comments, and merging duplicate selectors. This reduces file size by 20-60% and improves page load performance. This tool processes CSS entirely in your browser.
Why minify CSS
Minifying CSS strips the whitespace, line breaks, comments, and the final semicolon from each rule to produce the smallest possible stylesheet. Because CSS blocks page rendering until it loads, a smaller file means the browser can paint the page sooner — a direct improvement to perceived performance and Core Web Vitals.
The styling is completely unchanged; every selector, property, and value remains, only the formatting that helps humans is removed.
Minify at build time
Keep your source stylesheet formatted and readable, and minify as part of your build or deployment. Serving the minified file to users while editing the formatted one gives you both smaller downloads and maintainable code.
Minification and gzip together
Minification and server compression are complementary. Minifying strips comments and whitespace, then gzip or Brotli compresses the result further, so shipping minified CSS through a compressing server yields the smallest possible download. Doing both is standard for production.
How to minify CSS
- 1Paste your CSS. Paste the stylesheet or rules you want to compress.
- 2Click Minify. Whitespace, comments, and redundant characters are removed.
- 3Copy the result. Serve the minified CSS in production; keep the formatted copy for editing.
Examples
Compress a rule
Input
.btn {
color: #fff; /* white */
padding: 8px;
}Output
.btn{color:#fff;padding:8px}Bytes saved
Input
Formatted: 96 bytes
Output
Minified: 34 bytes (about 65% smaller)
What CSS minification removes
Safely stripped characters.
| Removed | Kept |
|---|---|
| Comments | Selectors and rules |
| Whitespace and newlines | Properties and values |
| Last semicolon in a block | Declaration order |
| Redundant spaces | Rendered styling |
Frequently asked questions
Does minifying change my styles?+
No. Every selector, property, and value is preserved. Only whitespace, comments, and the trailing semicolon in each block are removed, so the page looks identical.
Why does CSS size matter for performance?+
Stylesheets block rendering until they load, so a smaller CSS file lets the browser paint the page sooner, improving load time and Core Web Vitals.
Will it reorder or merge my rules?+
No. Declaration and rule order are preserved, which matters because later CSS rules can override earlier ones.
Should I minify custom properties and media queries?+
Yes. Variables, @media, and other at-rules minify safely along with the rest of the stylesheet.
Is my CSS private?+
Yes. Minification runs entirely in your browser.
Is it free?+
Yes — free and unlimited.
Will minifying break vendor prefixes?+
No. Vendor-prefixed properties such as -webkit- are preserved exactly; only whitespace and comments are removed.