CSS minification reduces file sizes, improves loading times and optimizes web performance. It can reduce file size by 30 to 70% on average.

How does CSS minification work?

Minification removes spaces, comments and unnecessary characters from CSS code while preserving functionality. The code remains valid but is more compact.

Can I unminify CSS code?

Yes, our tool can unminify minified CSS code to make it more readable and easier to maintain.

Is the code processed securely?

Absolutely. All processing happens in your browser. No data is sent to our servers, ensuring complete privacy.

Minify, Unminify & Beautify CSS Online — Free CSS Minifier

Minify, unminify and beautify your CSS code instantly to improve your website performance. Our free online CSS minifier removes unnecessary spaces, optimizes selectors and merges duplicate rules. Secure and private processing, directly in your browser.

CSS Minification

Using CSSO to optimize and compress CSS stylesheets

Package used

CSSO

v7.0.0

CSSO (CSS Optimizer) is a powerful tool for optimizing CSS files by removing redundancies and compressing code.

Basic example

Input CSS

.container {
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
}

.button {
  color: #000000;
  font-size: 16px;
  border: 1px solid #cccccc;
}

Minified CSS

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}

Minification options

Compression Level

Controls the aggressiveness of CSS compression

ConservativeConservative - Basic optimizations only

NormalNormal - Balance between size and compatibility

AggressiveAggressive - Advanced optimizations, may affect compatibility

Remove Comments

Removes all CSS comments from code

Comparison with/without option:

Original code

/* Header styles */
.header {
    background: #fff;
    padding: 20px;
}

/* Navigation */
.nav { display: flex; }

With removeComments: true

.header{background:#fff;padding:20px}.nav{display:flex}

With removeComments: false

/* Header styles */.header{background:#fff;padding:20px}/* Navigation */.nav{display:flex}

Difference

CSS comments are removed

Convert Colors

Converts colors to their shortest format

Comparison with/without option:

Original code

.button {
    background: #ff0000;
    color: rgb(255, 255, 255);
    border: 1px solid hsl(0, 100%, 50%);
}

With convertColors: true

.button{background:red;color:#fff;border:1px solid red}

With convertColors: false

.button{background:#ff0000;color:rgb(255,255,255);border:1px solid hsl(0,100%,50%)}

Difference

Colors are converted to shortest format

Merge Rules

Merges identical and adjacent CSS rules

Comparison with/without option:

Original code

.header {
    background: #fff;
    padding: 20px;
}
.header {
    margin: 10px;
}

With mergeRules: true

.header{background:#fff;padding:20px;margin:10px}

With mergeRules: false

.header{background:#fff;padding:20px}.header{margin:10px}

Difference

Identical CSS rules are merged

Minify Selectors

Optimizes CSS selectors to reduce their size

Comparison with/without option:

Original code

div.container > ul li:first-child {
    color: red;
}

div.container > ul li:last-child {
    color: blue;
}

With minifySelectors: true

div.container>ul li:first-child{color:red}div.container>ul li:last-child{color:blue}

With minifySelectors: false

div.container > ul li:first-child{color:red}div.container > ul li:last-child{color:blue}

Difference

CSS selectors are optimized

Other minification tools

Minify JavaScript

Minify JSON

Serialize PHP