Skip to main content

CSS Minifier / Beautifier

Loading…

About CSS Minifier / Beautifier

The CSS Minifier / Beautifier is a free online tool that compresses or formats CSS code instantly. Paste your stylesheet and choose between minify mode to strip whitespace and comments, or beautify mode to reformat minified CSS into clean, readable code.

Minifying CSS reduces file size by removing comments, extra whitespace, redundant semicolons, and unnecessary spaces around selectors and properties. Smaller CSS files load faster, reducing page weight and improving Core Web Vitals scores — particularly LCP and FID.

The beautifier does the reverse: it takes compressed or machine-generated CSS and formats it with consistent indentation, one declaration per line, and blank lines between rule blocks. This makes it easy to read and debug third-party CSS, compiled Sass/Less output, or any stylesheet that has lost its formatting.

Both operations run entirely in your browser. Your code is never sent to a server.

The minifier also shows a savings summary: original byte count, minified byte count, percentage saved, number of rule blocks, and number of declarations.

How to Use CSS Minifier / Beautifier

  1. Paste your CSS into the input panel on the left.

  2. Choose Minify to compress, or Beautify to reformat.

  3. For Beautify, select your preferred indentation style (2 spaces, 4 spaces, or tab).

  4. Click the action button and review the output on the right.

  5. Click Copy output to copy the result to your clipboard.

Examples

Example — Minify: removes spaces & comments
Input
/* Button */
.btn {
  color: #fff;
  padding: 10px 20px;
}
Output
.btn{color:#fff;padding:10px 20px}
Example — Beautify: formats minified CSS
Input
.nav{display:flex;gap:16px}.nav a{color:#333;text-decoration:none}
Output
.nav {
  display: flex;
  gap: 16px;
}

.nav a {
  color: #333;
  text-decoration: none;
}

Frequently Asked Questions

What does the CSS minifier remove?

The minifier strips comments (/* ... */), extra whitespace and newlines, spaces around structural characters ({ } : ; , > ~ +), and trailing semicolons before closing braces. It does not change property values, rename selectors, or alter the visual result of the CSS.

Is it safe to minify production CSS?

Yes — minification only removes characters that have no effect on how the CSS is interpreted. The output is functionally identical to the input. Always keep a copy of the original source file; never edit minified CSS directly.

How much can CSS minification save?

Typical savings range from 20% to 40% depending on how much whitespace and how many comments the original file contains. When combined with gzip compression, the net saving is smaller — but minification still reduces parse time and uncompressed cache size.

What indentation styles does the beautifier support?

You can choose 2 spaces (common in web projects), 4 spaces (common in many style guides), or a hard tab character. The choice is purely stylistic and does not affect how the CSS works.

Can this tool handle SCSS or Less?

No — this tool processes standard CSS only. SCSS and Less use additional syntax (variables, nesting, mixins) that is not valid CSS. Compile your SCSS or Less to CSS first, then paste the output here.

Does the beautifier fix invalid CSS?

No — the beautifier reformats structure but does not validate or correct errors. Invalid CSS will be reformatted as-is. Use the W3C CSS Validation Service if you need to check for errors.

Why does minified CSS sometimes look longer than expected?

The biggest savings come from files with large comment blocks, multi-line declarations, and media query boilerplate. If your original had minimal whitespace already, savings will be small.