CSS Minifier
Paste a stylesheet to strip whitespace and comments, shorten values like #ff0000 → red, and merge duplicate rules with CSSO's structural optimizations.
Runs in your browserNo sign-upNothing uploaded
How to use the CSS Minifier
- Paste CSS or open a
.cssfile. - Keep Restructure on to merge rules and declarations, or turn it off for a safe whitespace-only pass.
- Leave Keep license comments on to preserve
/*! … */notices. - Compare the original, minified and gzipped sizes.
- Copy the result or download
output.min.css.
How CSS minification works
This tool uses CSSO (CSS Optimizer), which parses your stylesheet into a syntax tree and prints it back in the shortest equivalent form. Beyond removing whitespace and comments it applies safe value rewrites:
#ffffff→#fff,#ff0000→red0px→0,0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- Empty rules and duplicate declarations are dropped
What does “restructure” do?
Restructuring looks across the whole stylesheet: rules with identical declarations are merged into one selector list (.a,.b{color:red}), and repeated selectors are combined. This often saves another 5–15% on real stylesheets. CSSO only merges when the cascade order stays the same, but if you rely on unusual overrides you can switch it off for a purely syntactic minification.
Why minify CSS?
CSS blocks rendering: the browser cannot paint the page until stylesheets in the <head> are downloaded and parsed. Smaller CSS means a faster First Contentful Paint and better Core Web Vitals, which helps both users and search rankings. Combine minification with gzip or Brotli on the server for the best result.
Frequently asked questions
Is it safe to minify CSS?
Does it support modern CSS such as custom properties, nesting and @layer?
--var), @media, @supports, @layer, @container and grid syntax are preserved.