CSS Minifier Online Tool

INPUT (CSS):

/* This is just a sample css code *//* All Comments Will be Removed */html {
    margin: 0px 0px 0px 0px; /* Will be Optimized */    padding: 0px 0px 0px 0px;
    font-family: sans-serif, Arial;
    background-color: #44444; 
    /* Wrong Color Error RED, Should be Fixed Manually */    background: hsla(198, 71%, 53%, 1);
    background: rgba(51, 170, 221, 1);
    /* background Will be Optimized */}
body {
    background: hsl(198, 71%, 53%);
    height: 100%;
    font-family: sans-serif, Arial;
    background-color: #444444; /* Will be Optimized */}
.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0); /* Transparent */    border: 3px solid transparent;
    border-radius: 5px;
    background-clip: padding-box;
}
#header {
    position: relative;
    height: 46px;
    line-height: 46px;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 0px;
    background: #333333;
    color: #eeeeee;
    font-size: 20px;
    box-shadow: inset 0px -8px 8px #222222;
    text-shadow: 0px -1px 0px #000000;
}
#body {
    position: absolute;
    top: 46px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}
.box {
    display: block;
    position: relative;
    box-sizing: border-box;
    height: 50%;
}
@media all and (min-width: 800px), all and (orientation: landscape) {
    #body:before {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        width: 1px;
        height: 100%;
        margin-left: -1px;
        z-index: 100;
        background: #33aadd;
        box-shadow: inset 0px 0px 1px #000000;
    }
    #body:after {content: ""; display: block; float: none; clear: both;}
    #body > .box {
        float: left;
        height: 100%;
        width: 50%;
    }
}
.box > .head {
    z-index: 2;
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0px 20px 0px 20px;
    background: #33aadd;
    color: #ffffff;
    text-shadow: 0px -1px #0077aa;
    box-shadow: 0px 2px 2px -1px #111111;
}
.box > .body {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: 32px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: -32px 0px 0px;
    padding: 42px 20px 10px;
    overflow: auto;
    outline: 0px none;
    border: 0px none;
    background: #222222;
    color: #33aadd;
    text-shadow: 0px -1px 0px #111111;
}
.box > .body::selection {
    background: #999999;
    color: #ffffff;
}
.box .head[title]:not([title=""]):after {
    content: attr(title);
    position: absolute;
    right: 20px;
    font-style: normal;
    font-size: 14px;
    vertical-align: top;
    color: #333333;
    text-shadow: 0px 1px #55ccff;
}
.ribbon {
    display: block;
    position: fixed;
    z-index: 100;
    width: 250px;
    height: 28px;
    bottom: 0px;
    right: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 4px 0px 0px;
    transform: rotate(-45deg) translate3d(78px,42px,0);
    box-shadow: 0px 0px 10px #ffffff,
    inset 0px 0px 0px 2px #ffffff;
    background: #eeeeee;
    color: #111111;
    text-shadow: 0px 1px #ffffff;
    font: normal bold 12px/28px Arial, Helvetica, Tahoma, Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.1s linear;
}
.ribbon:before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 0px;
    border: 0px dotted #cccccc;
    border-width: 2px 0px 2px 2px;
    border-radius: 4px 0px 0px;
}
.ribbon:hover {
    background: #0099ee;
    box-shadow: 0px 0px 15px #000000;
    color: #ffffff;
    text-shadow: 0px -1px #004488;
}
.ribbon:hover:before {border-color: #22bbff}

OUTPUT (Minified CSS):

CSS Minifier is a free online tool which used to optimize or compress or minify your web page cascading style sheets. Its automatically minify your css style to be consistent and optimized for loading speed. It is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. It is a cornerstone technology of the Internet World Wide Web, An important Web Design component alongside HTML and JavaScript. It is designed to enable the separation of presentation and content, including layout, colors, and fonts.

CSS Minifier Online Tool

Optimize, Compress, Minify CSS