Strip CSS comments and extra whitespace

Web developers use CSS Minifier when preparing compact code for delivery or a controlled comparison.

Strip CSS comments and extra whitespace and get compact code ready for the next step. Use it for free in your browser, with no account required.

How to use

  1. Drop your style sheet into the input area, or import the file you want to compress instead of pasting it by hand.
  2. Run the minifier: comments drop out and whitespace with no syntactic role is stripped away.
  3. Compare the size of the output with your original file to see how much the pass actually saved.
  4. Copy the compact code into your project and reload the page to confirm the layout has not shifted.
  5. Keep the readable version somewhere safe, because the packed file is meant for delivery rather than for editing.

Example

The sample holds two rules written over several lines, with margins, a background and padding spread out. After the pass, compare the two texts side by side and check that every selector, property and value still appears in the compact version.

Input

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Output

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Limits and formats

Where processing happens

The work happens inside your browser: the CSS you paste stays there, it is not sent anywhere and it vanishes when the tab closes. That means you can compress a client's style sheet without it leaving your computer.

Frequently asked questions

Will a minified file load faster?

It weighs less because comments and spare whitespace are gone, and a smaller file downloads faster. How much you notice depends on the size of the style sheet and on everything else the page has to fetch.

Can I undo the minification afterwards?

Not from this page. Comments and the original indentation are lost in the pass, so the readable layout cannot be rebuilt. Work on a copy, or keep your formatted file in version control before you replace it.

Why does the output still contain spaces?

Spaces that separate two values, two selectors or the words inside a property are part of the syntax. Only whitespace with no grammatical role is removed, which is why the compressed result still parses as valid CSS.

Tools in the same category