This strips comments and unnecessary whitespace out of a stylesheet, shrinking the file without changing how it renders. A smaller CSS file downloads and parses faster, which is a small but real contributor to page load speed, especially on a slow connection. For a site with a lot of visitors, that small saving adds up across every page load.
How to use it
- Paste your CSS into the box.
- Click minify.
- Look over the result underneath.
- Copy it into your production stylesheet.
- Keep your original, readable CSS somewhere for future edits.
When it helps
- Shrinking a stylesheet's file size before deploying to cut load time.
- Cleaning up CSS pasted from a design tool that adds a lot of comments and formatting.
- Preparing CSS to inline in an HTML email, where every byte counts.
- Cutting bandwidth for a site with a lot of traffic on slow connections.
- Quickly compacting a small snippet before pasting it into a code comment or chat.
Good to know
- Keep an unminified source version for editing. Minified code is hard to read or debug.
- Minifying alone doesn't remove unused rules. That needs a separate check of which selectors your HTML actually uses.
- Re-minify after every edit rather than editing the minified file directly.
- Pair this with an automated minification step in your build tool for production sites. This is fine for quick one off checks, but an automated pipeline saves time on every deploy.
- If your CSS uses custom properties, also known as CSS variables, double check the minified output still references them correctly, since the syntax around them is easy to break by hand if you ever edit the minified file directly.
Source and output
Keep the readable stylesheet in your project and generate the minified file during deployment. Editing minified CSS by hand is slow and invites mistakes.
Questions
Does minifying change how my site looks?
No. It only removes whitespace and comments that don't affect rendering. The visual result should be identical.
Will this remove unused CSS rules?
No, it only compresses whitespace and formatting. It doesn't check your HTML to see which selectors are actually used.
Is minified CSS harder to debug in dev tools?
Yes, since it loses its line breaks and structure. That's why it's best kept to production files, with a readable source version for development.
Does minifying remove vendor prefixes or fix typos?
No, minification only touches whitespace and formatting. Any vendor prefixes or typos in your original CSS carry through unchanged.
Will minified CSS still work if there's a syntax error in the original?
Minification doesn't reliably detect broken syntax, so validate your CSS separately if you suspect an error. Minifying broken CSS just produces a smaller broken file.
Does minification affect CSS custom properties or variables?
No, minification only touches whitespace and comments. Custom properties and their values pass through unchanged.