Minify CSS Online — Free CSS Minifier

Minify CSS code instantly with our free online tool. Compress stylesheets for production or concatenate multiple files. All processing happens in your browser.

Loading…

CSS Minification

Minify CSS online with CSSO. Compress stylesheets for production — instant browser processing.

Features

Reduce the size of your CSS code by removing spaces, comments and unnecessary characters.

Minify

Reduce the size of your CSS code by removing spaces, comments and unnecessary characters.

Package used

CSSO

v5.0.5

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;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

Minified CSS

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}.card{display:flex;flex-direction:column;gap:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

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

See Beautify indentation options →

How to Unminify CSS Online

CSS unminification restores readable formatting to compressed stylesheets. Paste any minified CSS into our tool to add proper indentation, line breaks, and organize selectors. This is essential for debugging production stylesheets, reviewing third-party CSS frameworks, or understanding vendor styles.

CSS Beautifier — Formatting Your Stylesheets

Our CSS beautifier applies consistent formatting rules to your stylesheets — standardized indentation, property ordering, and clean selector formatting. Whether your CSS comes from a build process, a minifier, or another developer, beautification makes it clean and maintainable.

Concatenating CSS Files

Combine multiple CSS files into a single stylesheet to reduce HTTP requests and simplify deployment. Use our concatenation feature to merge files, then optionally minify the combined output. This is especially useful for projects without a CSS preprocessor or bundler.