CSS Minifier / Compressor
Compresses a CSS string or file with no possible side-effect: strips comments and whitespace, removes the last semicolon, shortens colours and zero values.
Option 2: Or upload your CSS file
Ctrl + Enter
Result
About the CSS minifier
Minifying a stylesheet removes everything that is only there for humans and rewrites values in their shortest equivalent form. The result renders exactly like the original, but is smaller to download and faster to parse. The minifier used here is a real CSS parser (not a set of blind regular expressions): strings, url() contents, attribute selectors and calc() expressions are recognized and handled correctly. Everything runs in your browser.
Rules applied
| Rule | Example |
|---|---|
Remove whitespace, indentation and line breaks; remove spaces around { } : ; , and combinators > + ~ | a > b { color : red ; } → a>b{color:red} |
Strip comments (optionally keeping /*! … */ comments) | /* reset */ * { … } → *{…} |
| Remove the last semicolon of a block and duplicate semicolons | {a:1;;b:2;} → {a:1;b:2} |
| Remove empty rule sets and empty at-rules | p{} @media print{} → (nothing) |
Remove the unit of zero lengths (never inside calc(), never for %, deg, s, ms) | margin: 0px 0em → margin:0 |
| Remove the leading zero of decimals and trailing zeros | 0.50em -0.5s 1.0 → .5em -.5s 1 |
Convert rgb() / rgba(…, 1) with integer components to hexadecimal | rgb(255, 0, 0) → #f00 |
| Shorten six-digit hex colors when possible and lowercase them | #AABBCC → #abc |
Keep a single @charset (the first one) and move it to the top of the file | |
Replace none by 0 for border, border-*, outline and background | border: none → border:0 |
Collapse repeated shorthand values (margin, padding, border-width, border-radius…) | margin: 0 0 0 0 → margin:0, padding: 1px 2px 1px 2px → padding:1px 2px |
Normalize ! important | color: red ! important → color:red!important |
What is left untouched
- The content of strings and of
url(), including data URIs, is copied byte-for-byte. - Spaces around
+and-insidecalc(),min(),max()andclamp()are required by the specification and are kept:calc(100% - 2 * 10px)→calc(100% - 2*10px). - Custom properties (
--name) keep their case and their value is only stripped of whitespace, because the value may be reused insidecalc(). - Declarations are never reordered or deduplicated, so vendor-prefixed fallbacks keep working.
- Selectors, property names and keywords keep their case; only hexadecimal colors are lowercased.
Example
@charset "UTF-8";
/* Card component */
.card, .panel {
margin: 0px auto 0px auto;
padding: 0.5em 1.0em;
border: none;
background: rgb(255, 255, 255) url( "bg.png" ) no-repeat;
width: calc(100% - 2 * 10px);
color: #AABBCC !important;
}
.empty { }becomes:
@charset "UTF-8";.card,.panel{margin:0 auto;padding:.5em 1em;border:0;background:#fff url("bg.png") no-repeat;width:calc(100% - 2*10px);color:#abc!important}