CSS Minifier
Minify CSS to reduce file size.
- Runs in your browser
- No signup
How to use CSS Minifier
Paste your CSS
Any stylesheet, from a single rule to a whole framework file.
Minify or beautify
Minify strips comments and whitespace and shortens values. Beautify expands CSS with 2 or 4 space indents.
Copy the result
See the before and after size, then copy the output.
How to minify CSS
Every byte of CSS has to download before a page can render, so smaller stylesheets mean faster first paint, especially on mobile. CSS Minifier removes everything browsers do not need, and can also do the reverse, expanding minified CSS into readable code.
What the minifier does
Only changes that cannot affect how styles render:
- Removes comments and collapses whitespace and line breaks.
- Shortens hex colors, such as #ffffff to #fff.
- Strips units from zero values, so 0px becomes 0.
- Removes leading zeros from decimals, so 0.5 becomes .5.
- Drops the last semicolon before each closing brace.
Beautify mode
Got a minified stylesheet you need to read or debug? Switch to Beautify to expand it with one declaration per line and 2-space or 4-space indentation.
In a real project
Build tools such as Vite, webpack or Next.js minify CSS automatically. This tool is for everything else: a snippet for a CMS or email template, a quick check of how much a file would shrink, or static sites without a build step. Your CSS never leaves the browser.
How much will you save?
Typical hand-written stylesheets shrink by 20 to 40 percent after minification, more if they contain lots of comments. Servers usually compress CSS with gzip or Brotli as well, and minification and compression work together, so it is worth doing both.