Minify
CSS Minifier
CSS minify is boring in the good way. Strip comments, collapse space, drop the last semicolon in a block, save the finished stylesheet. Your theme.css never has to visit a build server you do not own.
Drop a file on the left. Drafts stay in this browser. Shortcut: Ctrl or Cmd + Enter to run.
How this css minifier works
- Paste or drop a .css file into the input on the left.
- Flip options if you see them (comments, indent, case). Defaults are the safe ones.
- Hit Run, or Ctrl / Cmd + Enter. Leave “Process on server” off unless you mean it.
- Read the status line, then copy, download, or jump to a related tool.
What a CSS minifier is allowed to touch
Safe minify removes /* comments */, extra spaces around braces and colons, empty noise. It should not invent Autoprefixer output or delete a rule it “thinks” is unused. Unused CSS belongs to a purger that has seen your templates. This page is not PurgeCSS, and it will not pretend.
Custom properties, calc(), media queries stay. If a declaration looks too compact, that is the point — browsers never needed your indent.
Next to Sass and PostCSS
Already compiling SCSS in Vite? Keep cssnano there. Use this when you inherited a 3,000-line theme.css, a WordPress dump, or a client file with no repo. The SCSS and LESS minifiers here treat source that still looks like CSS with extras — they are not compilers.
Need to read it first? CSS beautifier. Only comments? Comment stripper. Someone asking “but after gzip?” — that calculator is in Optimize.
Frequently asked questions
What does CSS minify change?
Comments and extra space around { } : ;. .hero {\n color: teal;\n} becomes .hero{color:teal}. Selectors, values, and custom properties stay. It should not delete a rule just because it looks unused — that needs your HTML.
Will minifying CSS break calc() or custom properties?
Modern calc(100% - 2rem) survives without the inner spaces in current browsers. Ancient bugs existed. If you still support a museum browser, keep a space around + and - inside calc(). Custom properties like --ink: #18181b minify fine.
CSS minify vs PurgeCSS / unused CSS?
Minify never asks “is this class in the template?” Purge/content-aware tools do, and they can delete a class you build in JavaScript (el.className = "open"). Minify is the safe last mile. Purge is a sharp knife.
Should comments stay in the stylesheet I put live?
License headers sometimes must stay. How-to comments (/* 16px rhythm */) do not. /* */ in CSS cannot nest, so a sloppy comment strip can eat a rule if someone wrote /* } */ as a hack. Read the tail of the file once.
Fun fact about CSS and bytes?
Fun fact: margin:0 and margin: 0; differ by a space and a semicolon the compressor may drop. The last semicolon in a block is optional in CSS. Minifiers love deleting it. Your eyes loved it more.
Example of a safe CSS minify?
Before: :root {\n --gap: 1rem; /* layout */\n} After: :root{--gap:1rem}. Same tokens, fewer bytes. If a selector used a space on purpose — div :hover vs div:hover — that space is syntax, not decoration. A good minifier keeps it.
Can I minify SCSS or LESS as if it were CSS?
You can crush whitespace in .scss / .less source, but // comments, nesting, and mixins are not CSS yet. Compile first for production CSS. Source minify is for sending a smaller snippet, not for replacing sass --style=compressed.
Does minified CSS gzip well?
Yes. Repeated {, class prefixes, and color tokens compress hard. Minify still helps gzip by removing comments gzip would otherwise repeat. Think stacking, not choosing.