CSS Minify
Minify CSS with clean-css. Level 1 is safe (whitespace, comments, basic optimizations); level 2 does cross-selector and value-level optimizations (merge rules, shorthand collapse). Inverse direction of the existing css-formatter.
About CSS Minify
CSS Minify shrinks a stylesheet with clean-css, offering a safe Level 1 pass that strips whitespace and comments and an aggressive Level 2 pass that merges rules and collapses shorthand across selectors. Reach for it when you want a smaller CSS payload to ship without pulling in a full build pipeline. It is the inverse of css-formatter and runs entirely in your browser.
- Category
- optimize
- Input
- Accepts: text/css or text/plain.
- Output
- Outputs: text/css (multiple).
- Cost
- Free, runs in your browser
- Memory
- low
Common uses
- Shrinking a hand-written stylesheet before pasting it into a page that has no build step
- Stripping comments and whitespace from CSS to cut transfer size on a static site
- Running Level 2 to merge duplicate rules and collapse shorthand for maximum savings
- Minifying a single component's CSS for an email template or inline style block
- Comparing minified output size against the source to see how much you save
- Cleaning up exported CSS from a design tool before committing it
Frequently asked questions
What is the difference between Level 1 and Level 2?
Level 1 is safe: whitespace, comments, and basic optimizations. Level 2 does cross-selector and value-level work like merging rules and collapsing shorthand, which is more aggressive.
What inputs does it accept?
CSS as text/css or plain text. The output is minified CSS.
Could Level 2 change how my page renders?
Level 2 reorders and merges rules, which is safe for most stylesheets but can affect edge cases that depend on source order. Test the output if your CSS relies on subtle cascade ordering.
Does my CSS get uploaded?
No. Minification runs in your browser via clean-css, so the stylesheet stays on your device.
Can I reverse a minify?
You cannot recover comments or original formatting, but css-formatter will re-expand minified CSS into readable, indented markup.
Keywords
- css
- minify
- compress
- optimize
- whitespace