Skip to content
codevory

CSS Minifier

Remove comments, whitespace and the last semicolon of every block from CSS. The result behaves exactly like the original.

CSS Minifier: the tool

Paste CSS to remove its comments and whitespace.

Input

Minified CSS

The result appears here.

How to use CSS Minifier

  1. Paste your CSS, or press Example.
  2. The minified stylesheet appears on the right, and the status bar shows the size before and after.
  3. Keep licence comments (those starting with /*!) if your licence requires the notice to stay in distributed files.
  4. Copy the result or download it as styles.min.css.

Example

The button stylesheet with its comment removed.

Input
/* Buttons */
.btn{display:inline-block;padding:.5rem 1rem;color:#fff;background:#3b35a8;border:0}
.btn:hover,.btn:focus{background:#2a2566}
@media (max-width:600px){.btn{display:block;width:calc(100% - 2rem)}}
Output
.btn{display:inline-block;padding:.5rem 1rem;color:#fff;background:#3b35a8;border:0}.btn:hover,.btn:focus{background:#2a2566}@media (max-width:600px){.btn{display:block;width:calc(100% - 2rem)}}

About this tool

This minifier removes what browsers ignore: comments, line breaks, indentation, the space after colons and commas, and the last semicolon in each block. It is deliberately conservative. It does not merge or reorder rules, shorten colours, drop units or rewrite values, because each of those can change behaviour in some browsers or in some context. Typical savings are 15 to 35 percent, similar to the gain from reformatting alone, and the result is safe to deploy.

Whitespace that has meaning is kept. The space in calc(100% - 2px) is required by the specification, and a space before a pseudo-class, as in a :hover, changes which elements the selector matches. Strings, unquoted url() values and custom properties are written exactly as they were. A test checks that minifying the formatted version of a stylesheet gives the same result as minifying the original.

The CSS is parsed first, so an unclosed brace, string or comment is reported with its position instead of producing broken output. For further savings, also serve your CSS with gzip or Brotli compression, which removes most of the remaining redundancy.

Frequently asked questions

Is it safe to minify CSS?

With this tool, yes. It only removes whitespace and comments, and keeps the whitespace that has a meaning. More aggressive optimisers that merge rules or shorten values can occasionally change how a page renders, which is why this one does not do that.

Why is the result not as small as with other minifiers?

Tools that restructure CSS can save more by merging selectors and shortening values, at the cost of some risk. If you need that, run a build-step optimiser such as Lightning CSS and review the diff. Compression on the server then reduces both versions to a similar transfer size.

What happens to comments?

They are removed, except licence comments starting with /*! when Keep licence comments is on. Many open-source licences require the notice to stay in files you distribute.

Does it break calc() or custom properties?

No. Spaces around the operators in calc() are required by the specification and are kept. Custom property values are kept as they are, because their syntax is open-ended.

Can I undo minification?

Yes, with the CSS formatter. The layout comes back, but comments that were removed do not.

More developer tools