CSS Minifier
A CSS minifier removes comments, whitespace and other characters the browser does not need, so your stylesheet downloads faster without changing how the page looks. Paste or upload your CSS below: the example shrinks from 372 to 269 bytes, 27.7% smaller. Switch to Beautify to turn minified CSS back into readable code.
Advertisement
How to minify CSS
- Paste your CSS into the left box, upload a .css file, or drop the file onto the box.
- Choose options. The defaults are safe for any valid CSS. Untick "Keep /*! licence comments" only if you have checked the licence allows it.
- Copy or download the result. Downloads are named
yourfile.min.css. - Keep the original for editing and publish only the minified copy. To edit a minified file later, switch to Beautify.
What this CSS minifier removes and shortens
Every example below is produced by the same code that runs in the tool.
| Rule | Before | After |
|---|---|---|
| Comments and line breaks | /* Header */ | .nav{margin:0} |
| Spaces around { } : ; , and combinators | .nav > li , .nav a { color : red ; } | .nav>li,.nav a{color:red} |
| Last semicolon in a rule | a{color:red;} | a{color:red} |
| Long hex colours | a{color:#FFFFFF;background:#3366ff} | a{color:#fff;background:#36f} |
| Leading and trailing zeros | a{margin:0.50em 1.0rem} | a{margin:.5em 1rem} |
| Units on zero lengths | a{padding:0px 16px} | a{padding:0 16px} |
| Space before !important | a{color:red !important} | a{color:red!important} |
| Empty rules | .unused{} | .b{color:red} |
| Licence comment (kept) | /*! MIT */ | /*! MIT */.b{color:red} |
| calc() spacing (kept) | a{width:calc(100% - 2rem)} | a{width:calc(100% - 2rem)} |
What it never changes
Aggressive minifiers save a few extra bytes by rewriting values, and that is where broken layouts come from. This tool reads your CSS as tokens, the way the CSS Syntax specification describes, and leaves alone anything where a shorter form could behave differently:
- Spaces around + and - in calc():
calc(100% - 2rem)stops working ascalc(100%-2rem). - Units on 0 where they matter:
0sin transitions,0%,flex: 1 1 0pxand anything inside a function keep their unit. - Custom properties such as
--brand: #FFFFFFkeep their value exactly, because they are only resolved where they are used. An empty--x: ;keeps its space, which older Safari versions need. - Strings and url():
contenttext, font names and data URIs are copied byte for byte. - Selectors:
div :first-childkeeps its space (it means something different fromdiv:first-child), and an ID such as#aabbccis never shortened like a colour. - Rule order and shorthands are never merged or reordered, so the cascade stays the same.
Tested on Bootstrap 5.3.3: the full stylesheet goes from 281,046 to 232,701 bytes, and a second, independent minifier (Lightning CSS) parses the original and the result into identical rules.
Advertisement
Minify vs gzip and Brotli
Your web host usually compresses CSS with gzip or Brotli while sending it. Minifying first still helps, because compression cannot remove comments or whitespace, only encode them more efficiently.
| Version | Original | Minified | Saved |
|---|---|---|---|
| Uncompressed | 281,046 | 232,701 | 17.2% |
| gzip (level 9) | 32,929 | 30,609 | 7.0% |
| Brotli | 24,501 | 22,688 | 7.4% |
The browser also parses the uncompressed size, so a smaller file is quicker to process on low-end phones. For the biggest win, remove CSS your pages do not use, then minify what is left.
Using minified CSS on Blogger and WordPress
Blogger
Go to Theme → Edit HTML and find <b:skin><![CDATA[. Keep the Variable definitions comment at the top unchanged, because Blogger reads its <Variable> tags for the Theme Designer. Minify only the CSS after it and paste the result back before ]]></b:skin>. Blogger placeholders such as $(body.text.color) pass through unchanged.
WordPress
In a child theme, keep the header comment (Theme Name:, Template:) at the top of style.css, since WordPress reads it to recognise the theme, and paste the minified CSS below it. For Appearance → Customize → Additional CSS, keep a readable copy elsewhere: minified CSS saved there is hard to edit later. Caching plugins that minify CSS do the same job automatically, so do not minify twice.
Tip: run PageSpeed Insights before and after. If "Minify CSS" is no longer listed under opportunities, the change worked.
Frequently asked questions
What does a CSS minifier do?
A CSS minifier deletes everything the browser does not need to read your styles: comments, line breaks, indentation, spaces around braces, colons and commas, and the last semicolon in each rule. A safe minifier can also shorten values, such as #ffffff to #fff and 0.50em to .5em. The page looks exactly the same; the file is just smaller.
Does minifying CSS improve page speed and Core Web Vitals?
Yes, a little. CSS is render-blocking, so the browser cannot paint the page until it has downloaded and parsed it; a smaller file shortens that wait, which helps First Contentful Paint and Largest Contentful Paint. Lighthouse flags unminified CSS under Minify CSS. The gain is largest on slow mobile connections and for CSS that is not gzipped.
Can minifying CSS break my website?
Not with this tool, as long as the original CSS is valid. It never changes strings, url() values, custom properties (--variables) or the spaces around + and - inside calc(), and it keeps units where a plain 0 would change the meaning, such as 0s, 0% and flex-basis. Keep your original file for editing and publish the minified copy.
What is the difference between minifying and gzip compression?
Minifying removes characters from the file itself; gzip or Brotli compression is applied by the web server while the file is sent. They work together. Bootstrap 5.3.3 is 281,046 bytes, 232,701 bytes minified, 32,929 bytes gzipped and 30,609 bytes minified and gzipped, so minifying still saves about 7% after compression.
Is my CSS uploaded to a server?
No. The minifier runs entirely in your browser with JavaScript, so your CSS never leaves your device. The page also works offline after one visit. Only your chosen options are remembered in your browser.
How do I unminify or beautify CSS?
Choose Beautify, paste the minified CSS and the tool rebuilds it with one declaration per line, two-space indentation, one selector per line and a blank line between rules. Comments removed during minification cannot be restored.
How do I minify CSS in Blogger?
In Theme, Edit HTML, minify only your own custom CSS and paste it back inside the b:skin CDATA section. Do not minify the Variable definitions comment at the top of the skin: Blogger reads the Variable tags inside it for the Theme Designer, and removing that comment breaks your theme settings.
Share this CSS minifier
Advertisement