CSS Minifier

Paste a stylesheet and watch the comments and indentation disappear: this CSS Minifier strips the characters a browser ignores, then reports exactly how many it removed.

What is the CSS Minifier?

Minification removes the parts of a stylesheet that exist purely for humans, the comments and line breaks and the indentation before every declaration, because the CSS parser treats them all as ignorable. This tool does that with a series of regular expressions rather than a full CSS parser, so it is a whitespace and comment stripper rather than an optimizer: it will not shorten #ffffff to #fff, merge duplicate rules, or drop unused selectors. Four checkboxes control it, and the character counts update as you type.

Key Features

• Minifies live as you type, no button press required
• Four toggles: comments, whitespace, trailing semicolons and zero units
• Zero-unit pass covers 21 length, angle and time suffixes
• Original, minified and percent-saved character counts under the panes
• Copy, download as style.min.css, or swap the two panes

Common Use Cases

• Shrinking a hand-written stylesheet before uploading it to a host without a build step
• Checking how much of a stylesheet is comments and indentation rather than rules
• Pasting compact CSS into a CMS or email template field that strips line breaks
• Trimming a small critical-CSS block you inline in the page head

How to Use the CSS Minifier

1. Paste your stylesheet over the sample CSS in the left-hand input box.
2. Leave Remove Comments and Remove Whitespace checked for the standard result.
3. Tick Remove Last Semicolon and Remove 0 Units if you want the extra bytes.
4. Read the Original, Minified and Saved badges under the two panes.
5. Press Copy, or Download .min.css to save the result as style.min.css.

Tips for Best Results

• The zero-unit option can break a calc expression, where a bare 0 is not always valid
• Comment stripping is unconditional, so a license banner at the top disappears too
• The whitespace pass tightens spaces around colons, which can alter a descendant selector
• Keep the expanded file as your working copy and re-minify after every edit

Why Use WiserWork's CSS Minifier?

Minified CSS is smaller on the wire and, more usefully, is one fewer thing for the browser to tokenize before it can paint. Because the whole pass runs inside the page you already have open, the stylesheet is never sent anywhere, which matters for client work under an agreement. What you do not get here is a source map, so debug against your editor's original file rather than the minified output.

Who Uses the CSS Minifier?

Front-end developers who maintain a handful of static pages rather than a bundler pipeline reach for this most. It also suits designers handing a stylesheet to a client, and anyone who inherited a theme file padded with commented-out experiments and wants to see how much of it is actually rules.

Frequently Asked Questions

Does minifying CSS change how my page looks?

It should not. The tool only deletes characters the CSS parser already ignores, so your declarations, selectors and their order come out untouched.

Is minified CSS the same thing as obfuscated CSS?

No. Minification only removes formatting; every class name, property and value stays readable to anyone who opens the file. CSS cannot really be obfuscated, because the browser has to understand it.

Does this tool generate a source map?

No. A source map is a separate file that maps each character of minified output back to its original line, and nothing here produces one. If you need that, minify in your build pipeline instead.

Is the Remove 0 Units option always safe?

Mostly, but not always. It rewrites a zero carrying any of 21 unit suffixes, and inside a calc expression a bare 0 can be invalid where 0px was fine. Check any calc values in the output.

Will it shorten my hex colors or merge duplicate rules?

No. It is a whitespace and comment stripper, not an optimizer. Shortening #ffffff to #fff and collapsing duplicate blocks needs a real CSS parser.

What happens to my license or attribution comment?

Remove Comments deletes every comment block, including one carrying a license. Uncheck it, or paste the banner back onto the output before you ship the file.

How much smaller should I expect the file to be?

Heavily commented, generously indented CSS often drops 20 to 40 percent by character count. A file that was already tight may barely move, and the Saved badge tells you either way.

Is my stylesheet uploaded anywhere?

No. The minifier is plain JavaScript in the page, so the text in the input box never leaves your browser, and closing the tab discards it.

Can I get the readable version back from the minified output?

Not from this tool. The Swap button moves text between the panes but does not re-indent anything, and the comments are gone for good, so keep your source file.

Why does the tool count characters instead of bytes?

Character count is what the JavaScript string reports. For plain ASCII CSS the two match, though a stylesheet with accented content strings will weigh slightly more in bytes.

Minification is the least glamorous performance win available and one of the most reliable: fewer characters to download, fewer to parse. Paste a stylesheet in, keep the readable original, and ship the compact version.