Minify a CSS code

This tool allows you to easily minify CSS code in order to reduce its weight to optimize the page load speed of your website.

Minification involves reducing the size of the code by removing everything that can be (comments, line breaks, superfluous spaces, superfluous characters, etc.) and optimizing certain other elements.

Example of minified CSS code

/* Example before minification */

h2 {
    font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.8em;
    margin: 1.3em 0 1.3em 0;
    color: #222222;
}

article p {
    margin: 1em 0 0.8em 0;
    line-height: 1.6em;
}

h2{font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;font-size:1.8em;margin:1.3em 0;color:#222}article p{margin:1em 0 .8em;line-height:1.6em}

Minification Steps

Line breaks and unnecessary (or double) spaces are removed:

.example {
    width: 800px;
    height: 600px;
}

.example{width:800px;height:600px}

Comments are removed:

/* Commentaire */
.example {
    width: 800px;
    /*height: 600px;*/
}

.example{width:800px}

The last ; of the rule is removed (as well as any double ;):

.example {
    width: 800px;;
    height: 600px;
}

.example{width:800px;height:600px}

Unnecessary zeros of values are removed:

.example {
    margin-top: 1.50em;
    margin-top: 0.50em;
    margin-top: 2.0em;
    margin-top: -0.5em;
    line-height: 2.00;
}

.example{margin-top:1.5em;margin-top:.5em;margin-top:2em;margin-top:-.5em;line-height:2}

Elements with value 0 are replaced by 0:

.example {
    margin-top: 0px;
    margin-top: -0px;
    margin-top: -0;
    margin-top: 0em;
    line-height: 0.00;
}

.example{margin-top:0;margin-top:0;margin-top:0;margin-top:0;line-height:0}

Properties where it is possible to enter values for the 4 sides (such as margin and padding) are shortened when possible:

.example {
    margin: 1rem 0rem 2rem 0rem;
    margin: 1rem 0rem 1rem 0rem;
    margin: 1rem 1rem 1rem 1rem;
}

.example{margin:1rem 0 2rem;margin:1rem 0;margin:1rem}

Colors are shortened when possible:

.example {
    color: rgb(12, 34, 56);
    color: #112233;
    color: #ff00ff;
}

.example{color:#0c2238;color:#123;color:red}

Empty rules are deleted:

.example1 {
    /*color: rgb(12, 34, 56);*/
}

.example2 { /* the only non-empty rule */
    color: #123456;
}

@media (min-width: 1200px){
    .example3 {
        
    }
}

.example2{color:#123456}

Superfluous ' ' from font-family values are removed:

.example {
    font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
}

.example{font-family:'Roboto Condensed',Helvetica,Arial,sans-serif}

The values bold and normal from font-weight are replaced:

.example {
    font-weight: bold;
    font-weight: normal;
}

.example{font-weight:700;font-weight:400}

Elements containing url() are optimized when possible:

@import url("exemple");

.example {
    background: url("bg.gif");
    background: url('bg.gif');
}

@import "exemple";.example{background:url(bg.gif);background:url(bg.gif)}

And, while applying these different optimizations, the tool ensures not to modify values between " ":

.example {
    content: "   >   ";
}

.example{content:"   >   "}