MSMuhammad Shahid

Free tool · runs in your browser

CSS minifier

Shrink your CSS by removing comments and whitespace and shortening values, without changing how it works.

Quick answer

Paste your CSS to get a minified version, with the bytes saved shown. It removes comments and whitespace and shortens values, so #ffffff becomes #fff and 0px becomes 0, using the proven CSSO engine. An optional setting also merges rules for a smaller file, which is worth a quick check on the page. Your code stays in your browser.

How to use it

  1. Paste your CSS. It is minified as you type.
  2. Choose the options. Turn on rule merging for a smaller file, or keep licence comments.
  3. Copy the result. Check the savings, then use the CSS in production.

Example

Whitespace goes, and #ffffff and 0px are shortened:

Input

body {
  margin: 0px;
  /* page colour */
  color: #ffffff;
}

Output

body{margin:0;color:#fff}

Common errors and how to fix them

My styles changed after merging
Turn off "Merge rules". Rule order matters in some cascades.
Could not read this CSS
A bracket or quote may be unbalanced. Check near the line reported.

Frequently asked questions

What does minifying CSS do?

It removes what browsers do not need, such as comments, whitespace and repeated values, and writes values in shorter forms. Styling stays the same.

How much smaller will my CSS get?

Often 20 to 50%, depending on how many comments and how much whitespace it has. The tool shows your exact saving.

Is minifying the same as gzip?

No, and you should use both. Minifying removes unneeded text, and then gzip or Brotli on your server compresses what is left.

Can minification break my CSS?

Basic minification is very safe. "Merge rules" moves rules around, which can occasionally change the result where order matters, so check the page.

Should I keep my original file?

Yes. Edit the readable version and minify it for production, because the minified file is hard to read.

What are /*! comments?

Comments marked with an exclamation mark, usually licence notices. Turn on "Keep /*! licence comments" to keep them.

Does it support modern CSS?

It handles current syntax, including custom properties, grid and media queries. Native nesting is passed through with light compression.

Is my code uploaded?

No. It is minified in your browser.

Should I minify JavaScript too?

Yes, for the same reason. Use the JavaScript minifier, and tidy your markup with the HTML formatter.

Can I turn minified CSS back into readable code?

The layout can be restored by a formatter, but comments removed here are gone, so keep your original file.

Sources

Related

More tools in this group

Guides and apps

By Muhammad Shahid. Last updated .