Minify & Unminify CSS Online — Free CSS Beautifier

Minify, unminify and beautify CSS code instantly with our free online tool. Compress stylesheets for production, restore readable formatting, or concatenate multiple files. All processing happens in your browser.

Compression

Remove comments

Beautify Options (Beautify only)

Indentation

Indent type

Share this tool:

Input

Loading editor...

Output

Loading editor...

CSS Minification

Minify, unminify and beautify your CSS code with CSSO. Free online tool to optimize, compress and format your CSS stylesheets.

Features

Our CSS tool offers three main features:

Minify

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

Unminify

Restore the readability of your minified CSS code by adding spaces and line breaks.

Beautify

Format and beautify your CSS code with customizable indentation (2 or 4 spaces, or tabs).

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

Beautify Options

Options for formatting and beautifying CSS (Beautify only, not for Minify/Unminify)

Indentation Size

Sets the number of spaces or tabs for indentation during Beautify

Original code

.header{color:red;padding:10px}

With 2 spaces

.header {
  color: red;
  padding: 10px;
}

With 4 spaces

.header {
    color: red;
    padding: 10px;
}

Difference

Indentation is customizable only for Beautify. Unminify always uses 2 spaces.

Indentation Type

Use spaces or tabs for indentation during Beautify

Original code

.header{color:red;padding:10px}

With spaces

.header {
  color: red;
  padding: 10px;
}

With tabs

.header {
	color: red;
	padding: 10px;
}

Difference

Spaces are more standard, tabs may be preferred according to your code conventions.

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.

Frequently Asked Questions

Everything you need to know about CSS minification, unminification and beautification

Why minify CSS?

Minification reduces CSS file size by removing whitespace, comments and redundant code. Smaller stylesheets load faster and use less bandwidth. Many sites see 20–40% size reduction with no change in how styles behave.

How do I unminify CSS?

Paste your minified CSS into the input area and click Unminify. The tool restores indentation and line breaks so you can read and edit the code. Useful when debugging production CSS or inspecting third-party styles.

What does the CSS beautifier do?

The beautifier formats your CSS with consistent indentation, spacing and line breaks. It does not change behavior — only layout. Use it to clean up styles from builds, minifiers or other tools before editing.

Can I concatenate multiple CSS files?

Yes. Use the concatenate feature to merge several CSS files into one. You can then minify the result. Handy for projects that do not use a preprocessor or bundler and want fewer HTTP requests.

Is my CSS processed securely?

All processing runs in your browser. Nothing is sent to our servers. Your stylesheets stay on your device and remain private.

How much smaller will my CSS get?

Typical savings are 20–40% depending on comments, whitespace and redundancy. Aggressive options can reduce size further. The tool shows the exact result size after processing.

Does minification change how my styles work?

No. Minification only removes unnecessary characters and applies safe optimizations. Selectors, properties and values are preserved so your layout and appearance stay the same.

What CSS optimizations are applied?

Options include removing comments, shortening color values, merging duplicate rules and minifying selectors. You can choose conservative, normal or aggressive compression to balance size and compatibility.

Other minification tools