Phrasit

Search Phrasit

Search every tool, guide, and citation page.

FREE - CSS - MINIFY

CSS Minifier

Minify pasted CSS by stripping comments, collapsing whitespace, trimming syntax spaces, and reporting size savings.

186 bytes before134 bytes after28.0% saved

When CSS minification helps

CSS minification is useful before pasting a small stylesheet into a CMS, email template, landing page builder, or quick static page. It removes comments and unnecessary spacing while preserving selectors, declarations, media queries, and custom properties.

Keep your original readable CSS somewhere safe, then use the minified output for delivery. If a stylesheet relies on unusual hacks or generated code, test the result before shipping it because minifiers can expose syntax that was already fragile.

About the CSS minifier

This minifier strips everything a browser does not need to parse CSS: comments, line breaks, indentation, and the spaces around braces, colons, semicolons, commas, and combinators. The rules themselves are untouched, so the stylesheet renders identically, but the file gets smaller. The toolbar shows the byte size before and after along with the percentage saved, so you can see exactly what you gained.

Use it as a quick last step before pasting CSS into a page, an email template, or an inline style block, or any time you want a single-line version of a rule set. Smaller CSS means fewer bytes over the network and a slightly faster first paint, which is why build tools minify stylesheets automatically. Here you get the same result instantly with no setup.

How to use it

  1. Paste your CSS into the input panel on the left.
  2. Read the minified result in the right panel; it regenerates as you edit.
  3. Check the byte-size badges and the percentage saved to gauge the reduction.
  4. Click Copy minified to put the compact CSS on your clipboard.
  5. Keep your original, commented source separately, since minifying is one-way.

Examples

Strip comments and whitespace

Paste a rule with a /* Button styles */ comment and indented declarations. The output drops the comment entirely and collapses everything onto one line, so .button{display:inline-flex;align-items:center} appears with no spaces around the colons, semicolons, or braces.

Watch the byte counter

A nicely formatted block might read 220 bytes before. After minifying, the badges show the new smaller size and a percentage saved, for example around 30 percent. Whitespace and comments are pure overhead for delivery, so well-commented source often shrinks substantially.

Flatten a multi-line selector list

A selector group split across lines, like h1,\nh2,\nh3 {\n margin: 0;\n}, collapses to h1,h2,h3{margin:0}. The spaces after the commas and around the braces are removed, giving you a compact one-line rule that is easy to drop inline.

Frequently asked questions

Does minifying change how my CSS renders?
No. It only removes characters the parser ignores, comments and insignificant whitespace, so selectors, properties, values, and their order are unchanged. The page looks exactly the same; the file is just smaller.
Will my comments survive?
No. All /* ... */ comments are removed, since their whole purpose is overhead the browser does not need. Keep a commented master copy of your stylesheet for editing and use the minified output only for delivery.
How much smaller will my file get?
It depends entirely on how much whitespace and commentary the source has. Heavily formatted, well-documented CSS can shrink by a third or more, while already-dense CSS saves little. The badges report the exact before and after byte sizes for your specific input.
Does it rename classes or merge duplicate rules?
No. This is whitespace and comment removal only. It does not shorten class names, combine overlapping selectors, drop unused rules, or reorder properties. Those are jobs for a full optimiser; the trade-off there is risk, whereas pure minification is safe.
Can I un-minify the result later?
Not with this tool, and not perfectly with any tool, because the comments and original line structure are gone for good. A formatter can re-indent minified CSS into something readable, but it cannot restore your comments. Always keep the source.

Good to know

Minification works on the safe insight that CSS whitespace is mostly cosmetic. The browser does not care whether a rule spans eight indented lines or one dense line; only the tokens matter. So removing the gaps around { } : ; , and combinators like > + ~, plus deleting comments, cuts bytes with zero effect on rendering. This is distinct from gzip or brotli compression, which the server applies on top and which compresses minified CSS even further.

Treat the minified output as a build artifact, never as your editing copy. Because comments and formatting are discarded, you should always keep the readable source and minify again whenever it changes. This tool deliberately does only safe transforms: it will not touch values, so it never risks changing behaviour the way an aggressive property-merging optimiser can. If you need that deeper optimisation, dead-code elimination or shorthand collapsing, reach for a dedicated CSS optimiser and test the result carefully.

Related tools