Compress CSS by removing unnecessary whitespace and simplifying syntax. Reduce the text size of a stylesheet while keeping a readable source copy.
How to use
Paste up to 200,000 characters of CSS and run the minifier. Compare the result in your page before replacing the deployed stylesheet.
Example
A rule such as .card { color: red; } loses extra spacing. The output remains CSS and belongs in a stylesheet, not an HTML text block.
FAQ
Does it reorder my rules?
Structural rule reordering is disabled. Still test your layout, since minification is not a visual regression check.
Related tools
A practical task
Compare the generated file with your site's uncompressed source, then test a page with different viewport sizes. Responsive and print rules are part of the stylesheet too. A smaller output is useful only when those contexts still show the intended layout.
Another useful question
Should I edit the minified version later?
Keep changes in the readable source and regenerate. Otherwise the next build can overwrite a direct fix made only in the compact copy.
Details for interpreting the result
| Detail | Explanation |
|---|---|
| CSS cascade | The same selector can appear more than once for a reason. Order, specificity, media queries, and inheritance all affect the result. A shorter or neater stylesheet still needs a check in its actual page. |
| Formatting and behavior | A formatter changes presentation of source code. It does not prove that a program calculates the right value or that a page looks correct. Keep behavior checks separate from indentation and spacing checks. |
| Readable and compact source | Minification produces a compact delivery copy. Keep the readable source for maintenance and rebuilding. Editing only a compressed copy makes reviews harder and loses the useful context removed with comments. |
| Comments in source files | Comments can contain licenses, build notes, and explanations as well as disposable text. Before removing them, check the obligations of bundled assets and keep important notices in the appropriate source or distribution file. |
| Preview boundaries | A restricted preview can block scripts, external images, fonts, and other resources. That keeps the preview separate from active page behavior, but it also means it is not a faithful copy of every production layout. |
| Source boundaries | A summary or rewrite works from the material you provide. A URL alone does not supply the full article in this interface. Include the relevant passage and keep citations attached to the claims they support. |
| Source and output versions | A transformation creates a new representation of the supplied material. Keep the original when the operation removes structure or characters. An output with missing information cannot always reconstruct the input that produced it. |