CSS Minifier

How to use the CSS Minifier

1. Paste your stylesheet, open a .css file, or click Load sample.
2. Click Minify and choose whether to apply safe shortenings and keep /*! license comments.
3. Check the size stats to see how many bytes you saved, and read any warning about unclosed comments or unbalanced braces.
4. To read compressed CSS instead, click Beautify and pick an indentation style.
5. Copy the result or download it as a .css file.

Features

• Removes comments, whitespace and the last semicolon in every block
• Safe shortenings: 0px to 0, #ffffff to #fff, 0.50 to .5
• Never alters strings, url() values or custom property values
• Keeps /*! license comments when you want them
• Beautify mode for reading minified stylesheets
• Shows original size, result size and the percentage saved

What CSS minification removes

Browsers ignore most of what makes a stylesheet pleasant to edit: comments, indentation, line breaks and the spaces around braces and colons. Minification removes those characters so the file downloads faster, without changing a single rule. This tool removes comments, collapses every run of whitespace, drops spaces around {, }, ;, , and selector combinators such as >, deletes the optional last semicolon in each block and removes rules whose body is empty.

.card > .title {
    margin: 0px auto;
    color: #FFFFFF;
}

becomes .card>.title{margin:0 auto;color:#FFF}.

Shortenings that are always safe

What it deliberately leaves alone

Some shortenings that look harmless are not. The minifier skips them on purpose:

• Percentages and times. 0% is required in keyframe selectors and in functions such as hsl(), and a time such as 0s must keep its unit.
• Zeros inside calc(). calc(100% - 0px) is valid, but calc(100% - 0) is not, because math functions need units when lengths are added.
• The flex shorthand. flex: 0px sets a zero basis, while flex: 0 sets the grow factor.
• Custom properties. The value of --gap: 0px may later be used inside calc(), so it is copied exactly.
• Spaces before a colon in selectors. a :hover means a hovered element inside a link, which is different from a:hover.
• Strings and URLs. Text in quotes and url() values are protected before anything else happens.

How much will you save?

That depends on how the stylesheet was written. Hand-written, well-commented CSS with generous indentation often shrinks by a quarter or more, while CSS that a framework has already minified barely changes. The stats under the editor show the exact figure for your file. Remember that servers usually compress text with gzip or Brotli as well; minifying first still helps, because comments and redundant characters never reach the compressor at all.

License comments

Many libraries start their CSS with a comment such as /*! Library v2 | MIT License */. The exclamation mark is a convention that tells minifiers to keep it, since some licenses require the notice to stay with the code. Leave Keep /*! license comments ticked when you ship third-party CSS.

Beautifying minified CSS

Beautify mode does the opposite job. It expands a compressed stylesheet with one declaration per line, so you can read a vendor theme, find the rule that overrides yours or debug a production issue. Pair it with the HTML Formatter and the JavaScript Minifier for the rest of your front-end code.

Frequently asked questions