Free CSS Minifier
Paste or upload your CSS and compress it instantly in your browser. Removes comments, collapses whitespace, and optimises selectors. No server required.
What gets minified
CSS minification targets what the browser skips: comments, whitespace between rules, and spaces around operators. The output works the same as the source, just in fewer bytes. Smaller stylesheets mean less to download before the page can start rendering.
Handles all standard CSS: media queries, custom properties (variables), keyframe animations, and pseudo-selectors. It uses CSSO, which also merges duplicate rules and restructures declarations to shrink the output further, and the result is CSS that works the same way. calc() spacing, strings, and url() values are preserved exactly.
Your CSS stays in your browser. Nothing is uploaded.
Before and after
Before: 156 bytes
.card {
padding: 1rem;
margin: 0 auto;
/* Center the card */
background-color: #fff;
}
.card:hover {
background-color: #f5f5f5;
}After: 78 bytes (50% smaller)
.card{padding:1rem;margin:0 auto;background-color:#fff}.card:hover{background-color:#f5f5f5}Comments are stripped, whitespace is collapsed, and the two rules are joined on a single line. Every selector and value is unchanged.
How the CSS minifier works
This tool uses CSSO (CSS Optimizer), which parses your CSS into a full syntax tree using css-tree. Unlike simple regex-based strippers, CSSO understands the CSS grammar, so it can safely remove whitespace around operators, merge duplicate rules, and restructure shorthand properties.
CSSO is used in the PostCSS ecosystem and handles edge cases that simpler tools break: calc() expressions keep their required spaces, strings and url() values are never altered, and custom properties pass through unchanged.
If CSSO encounters a parsing error (uncommon, but possible with non-standard syntax), it falls back to returning the original input unchanged.
When to use this vs. a build tool
Modern bundlers handle CSS minification automatically. Vite uses Lightning CSS, webpack uses css-minimizer-webpack-plugin (often backed by cssnano or CSSO), and PostCSS has its own minification plugins. If you already have a build pipeline, minification is probably happening in your production builds.
This tool is useful for one-off stylesheets, checking how much a file compresses before adding a build step, or minifying CSS that comes from a theme editor or CMS where you don't control the build process.
CSS Minifier FAQ
What does CSS minification remove?
CSS minification removes comments, unnecessary whitespace, newlines, and trailing semicolons. It also collapses shorthand properties and removes redundant spaces around selectors, colons, and brackets.
How much can CSS minification save?
Typical savings are 20–50% depending on how your CSS is written. Stylesheets with many comments, consistent indentation, and verbose property values see the biggest reductions.
Does CSS minification affect browser compatibility?
No. Minification only removes characters that have no effect on CSS parsing. All selectors, property values, and at-rules remain unchanged. The minified stylesheet produces the same result as the original.
Does CSS minification affect custom properties (variables)?
No. Custom property names and values are preserved exactly as written. --my-color: #ff0000 stays intact. Minification only removes whitespace and comments around declarations, not the declarations themselves.