How to use the CSS Minifier
Minify your CSS in three steps:
1
Paste your CSS
Paste your stylesheet into the input panel, or upload a .css file using the upload icon in the panel header.
2
Choose options and click Minify
Enable 'Remove Comments' to strip all CSS comments, and 'Shorten Colors & Zeros' to apply micro-optimisations. Click 'Minify CSS'.
3
Review savings and copy
The stats bar shows before size, after size, bytes saved, and percentage reduction. Copy the minified CSS or download it as a .css file.
When to use this tool
Use the CSS minifier to reduce stylesheet size before shipping to production:
- →Compressing stylesheets before deploying a static site or web app to production
- →Reducing CSS payload size to improve Lighthouse Performance and Core Web Vitals scores
- →Minifying CSS in environments without an automated build pipeline (simple static sites, codepens, prototypes)
- →Removing development comments from CSS before shipping a client project
- →Compressing CSS for HTML email templates where every byte affects deliverability
- →Benchmarking how much size a build tool like webpack or Vite would save before setting one up
- →Quickly creating a minified version of a standalone widget's CSS for distribution
Frequently asked questions
Q:What optimisations does the CSS minifier apply?
The core minification removes all whitespace between rules, collapses spaces around colons, semicolons, braces, and commas, joins all lines into a single line, and removes the last semicolon before a closing brace. The optional 'Shorten Colors & Zeros' mode additionally removes units from zero values (0px → 0, margin: 0em → margin: 0) and shortens duplicate-digit hex colours (#aabbcc → #abc, #ffffff → #fff).
Q:Does CSS minification affect specificity or cascade behaviour?
No — minification only removes insignificant whitespace and comments. It does not change selector specificity, property inheritance, cascade order, or any computed value. The minified CSS produces identical rendering to the original in all browsers.
Q:Should I minify CSS manually or use a build tool?
For quick one-off compressions, small projects, or prototypes, this online tool is the fastest approach. For production projects with a CI/CD pipeline, integrating a build tool (PostCSS with cssnano, Vite's built-in CSS minification, or webpack's css-minimizer-webpack-plugin) is more maintainable. Use this tool to preview the savings and validate the output before committing to a build tool.
Q:Is removing the last semicolon before a closing brace safe?
Yes — the CSS specification defines the last semicolon in a rule block as optional. All major browsers (Chrome, Firefox, Safari, Edge) parse both forms identically. This is a universally safe optimisation used by every production CSS minifier.
Q:Can I minify SCSS or compiled CSS from preprocessors?
Yes — if your CSS is already compiled to standard CSS (e.g. the output of running sass or less), paste that compiled output here. The minifier works on standard CSS only and does not understand SCSS or Less source syntax. Always minify the compiled output, not the source file.
Q:How much reduction can I expect for a typical CSS file?
Typical production stylesheets see 20–40% size reduction from whitespace and comment removal. Files with many verbose comments or heavy indentation (4-space) may compress by 40–60%. The stats bar shows the exact result for your specific file.