Free tool
CSS minifier and beautifier
Free · no sign-up · runs in your browser, nothing is uploaded
Working…
What the CSS minifier changes
CSSO (CSS Optimizer) works in three steps: it cleans (drops comments, whitespace and empty rules), compresses values, and restructures (merges declarations and rules). These are real before/after pairs from the minifier on this page:
| Before | After CSSO | What happened |
|---|---|---|
| a { color: #ff0000 } | a{color:red} | Shortest color form |
| a { color: rgb(255, 0, 0) } | a{color:red} | rgb() to a keyword |
| a { color: #ffffff } | a{color:#fff} | 6-digit hex to 3-digit |
| a { margin: 0px 0px 0px 0px } | a{margin:0} | Units dropped from 0, shorthand shortened |
| a { font-weight: bold } | a{font-weight:700} | Keyword to its shorter number |
| a { transition: opacity 0.50s } | a{transition:opacity .5s} | Leading and trailing zeros |
| .a { color: red } .b { color: red } | .a,.b{color:red} | Rules with the same body merged |
| .a { color: red } .a { padding: 0 } | .a{color:red;padding:0} | Rules with the same selector merged |
| a {} b { color: red } | b{color:red} | Empty rule removed |
| /*! keep */ /* drop */ a { color: red } | /*! keep */ (new line) a{color:red} | Only /*! comments kept |
Two options: Merge and restructure rules (CSSO’s restructure, on by default) and Keep /*! license */ comments (CSSO’s comments: 'exclamation'). Many licenses ask you to keep their notice in the shipped file, and /*! is the usual way to mark it.
Minified size vs gzip size
The cards under the editor show four numbers: input size, output size, the percent saved, and the percent saved after gzip. Gzip is measured in your browser with the standard CompressionStream API at its default level.
The gzip number is usually the smaller saving. Compression already shrinks repeated whitespace and property names, so part of what the minifier removes would have been compressed anyway. Minified CSS is still smaller after compression, and the browser has less to parse.
Minify CSS in your build
For one file, this page is enough. For a project, minify on every build. With the CSSO command line:
npm install --save-dev csso-cli npx csso styles.css --output styles.min.css --source-map file
From Node, with the same engine as this page:
import { minify } from 'csso';
const { css } = minify(source, { restructure: true, comments: 'exclamation' });Other common minifiers do the same job inside a bundler:
# Lightning CSS npx lightningcss --minify input.css -o output.css # from the lightningcss-cli package # esbuild npx esbuild styles.css --minify --outfile=styles.min.css
Vite minifies CSS in production builds by default, and most other bundlers have a setting for it, so check before adding a step. Writing utility-first CSS? See Tailwind CSS tools on DevHunt.
Gotchas
- An unclosed brace hides everything after it. CSS parsers skip broken blocks quietly, so a minifier can produce valid-looking output that is missing rules. This tool checks braces, strings and comments first and points at the problem instead.
- Don’t edit .min.css by hand. Keep the readable file as the source and minify it again. If you only have the minified file, use Beautify mode to get a readable copy.
- Minify last. Run Autoprefixer, PostCSS plugins or Sass first, then minify the final CSS.
- Inline styles in HTML are minified by the HTML formatter in Minify mode, and scripts by the JavaScript minifier.
More free developer tools
FAQ
What does a CSS minifier do?+
It rewrites a stylesheet into the shortest CSS that means the same thing. It removes comments, whitespace and the last semicolon in each block, and shortens values: #ff0000 becomes red, 0px becomes 0, 0.50s becomes .5s. A structural minifier like CSSO also merges rules that share selectors or declarations.
Does minifying CSS make a site faster?+
It makes the file smaller, so it downloads sooner, and CSS blocks rendering until it arrives. How much you save depends on the file: comments and indentation are often a large share of hand-written CSS. Check the "Saved after gzip" card, because that is close to what the network sends.
Is minifying the same as gzip?+
No, and you want both. Minifying removes characters for good. Gzip or Brotli compression is applied by the server on the way out and undone by the browser. Compression works well on repeated text, so minified CSS saves less after gzip than before it, but it still saves.
Can minifying break my CSS?+
Rarely. CSSO’s restructuring merges and moves declarations. If you see a difference after minifying, turn off "Merge and restructure rules" to get plain whitespace and value minification. Broken input is the more common cause: an unclosed { swallows the rules after it, so this tool stops and shows you where it is.
How do I unminify CSS?+
Switch the mode to Beautify, or press "Beautify the result". Prettier puts each declaration on its own line and indents nested blocks. Comments that the minifier removed do not come back, so keep your original source.
Can I minify SCSS or Less?+
Compile them to CSS first (sass, lessc or your bundler), then minify the CSS. This page can beautify SCSS and Less directly: pick the syntax in Beautify mode, or drop a .scss or .less file.
Is my CSS uploaded?+
No. CSSO and Prettier run in your browser. Short inputs are kept in the page address so you can share the result; nothing is sent to a server.
Sources: CSSO · csso-cli · Lightning CSS docs · esbuild API: minify · Vite build options · Prettier options. Checked 2026-10-29.