CSS Minifier
Compress CSS while keeping values intact.
Use the CSS Minifier tool
What this css minifier does
CSS Minifier strips comments and collapses whitespace around selectors, properties and values. It respects quoted strings and url() content, so file names and data URIs are not corrupted.
It does not rename classes, merge rules, drop unused selectors or add vendor prefixes. For production builds, a dedicated CSS pipeline with source maps is still the better choice.
Why use it
- Produce a smaller stylesheet for a static page or email template.
- Clean copied CSS before embedding it in a component.
- Check how much space comments and indentation consume.
How to use it
- 1Paste the CSS.
- 2Review the byte counts and the minified output.
- 3Copy or download the result.
- 4Load the page and confirm that layout and hover states still work.
Worked examples
Simple rule
Input
.card {
padding: 16px;
border-radius: 12px;
}Output
.card{padding:16px;border-radius:12px}URL with spaces
Input
background: url("images/hero image.png");Output
The quoted URL is preserved.
Common mistakes
- Minifying before the stylesheet is final, which makes later diffs noisy.
- Assuming the minifier will remove unused rules; it cannot know what the HTML uses.
- Forgetting to test pseudo-classes and media queries after compression.
Frequently asked questions
Does it support CSS custom properties?
Yes. Declarations and var() references are preserved; only whitespace and comments are removed.
Will calc() break if spaces are removed?
The minifier keeps the spaces required around + and - inside calc(). Check any complex expressions after minifying.
Can it merge media queries?
No. It is a whitespace and comment compressor only.
Does it handle SCSS or Less?
Not as a preprocessor. Compile them to CSS first; partial syntax may survive but nested rules should not be minified directly.