CSS minifier
Minify CSS with CSSO, including structural optimisation that merges duplicate rules and shorthands, and see the gzipped saving.
Input
Result
The result will appear here.Most CSS minifiers only strip whitespace and comments. CSSO also restructures: it merges rules that share identical declarations, collapses margin-top, margin-right, margin-bottom and margin-left into one margin shorthand, shortens padding: 8px 16px 8px 16px to 8px 16px, and rewrites #ffffff as #fff and 0px as 0. It is the engine behind postcss-csso and gulp-csso. Paste a stylesheet to see how much of it the browser actually needs, measured raw and gzipped.
How it works
- The stylesheet is parsed once before minifying, and a syntax error is reported with its line, because CSSO would otherwise drop the broken rule without a word.
- Turning restructure off limits CSSO to safe local changes: whitespace, comments, colours and numbers.
- /*! comments are kept by default for licences; switch that off to remove every comment.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Is restructuring safe?
- It is designed to preserve behaviour: rules are merged or moved only when CSSO can show that the cascade gives the same result. The rare exceptions are stylesheets that rely on browser hacks or on invalid declarations being ignored in a particular way. If the minified CSS renders differently, turn restructure off and compare.
- Why was my CSS rejected?
- A declaration such as color red without its colon, or a bracket left open in a selector, is a syntax error. Browsers skip such rules, and CSSO would too, silently. Stopping with the line number means you fix the mistake instead of shipping a stylesheet that is missing a rule you thought was there.
- Does it handle modern CSS such as nesting, @layer and @container?
- Custom properties, @layer and @container are fine. Native CSS nesting is not: CSSO's parser predates it and would throw the nested rules away, so this tool stops with a parse error instead. Flatten nested rules first, or let a build tool such as Lightning CSS do the whole job.
- CSSO, cssnano or Lightning CSS?
- On typical stylesheets they end up at similar sizes. cssnano is a pack of PostCSS plugins; Lightning CSS is written in Rust and also handles vendor prefixes and lowering new syntax; CSSO's strength is structural merging. CSSO's parser has not kept up with newer syntax such as native nesting, which matters if your stylesheets use it.
The open-source behind it
This tool runs on css/csso, released under MIT. If you need the same behaviour inside your own program, that is the library to reach for.
css/cssoAlso known as
- css minifier
- minify css online
- css compressor
- csso online
- compress css
- css minify