CSS Minifier

Minify CSS by removing whitespace, comments, and redundant code to reduce file size.

CSS Minifier tool

Loading...

Example

Input: body { color: red; margin: 0 auto; } /* header */ h1 { font-size: 2em; } (formatted over 6 lines)

Result: body{color:red;margin:0 auto}h1{font-size:2em}

Comments, line breaks and spaces around braces, colons and semicolons are removed, as is the last semicolon in each rule. Spaces inside values like 0 auto are kept.

CSS Minification Examples

InputMinified output
a > b { color : red ; }a>b{color:red}
.nav a:hover { color: blue; }.nav a:hover{color:blue}
p { margin: 0 auto; }p{margin:0 auto}
div { width: calc(100% - 20px); }div{width:calc(100% - 20px)}
/* note */ h1 { font-size: 2em; }h1{font-size:2em}
/*! MIT license */ b { x: 1 }/*! MIT license */ b{x:1}
a { color: red;; }a{color:red}

Output of this minifier.

  1. Paste your CSS source code into the CSS panel.
  2. The minifier instantly processes the CSS and displays the compressed output in the Minified CSS panel.
  3. To reverse the process, paste minified CSS into the Minified CSS panel to get a beautified version.
  4. Verify the minified output preserves all your CSS rules and selectors.
  5. Click the copy button to copy the minified CSS for use in your production stylesheet.

What CSS Minification Removes

A CSS minifier makes a stylesheet smaller by removing what the browser does not need: comments, line breaks, indentation and extra spaces. p { margin: 0 auto; } becomes p{margin:0 auto}, which renders exactly the same.

The hard part is knowing where a space matters. This minifier keeps the space in a descendant selector such as .nav a, inside values like 0 auto, and around the minus sign in calc(100% - 20px), where removing it would break the rule. Strings, url() values and comments that start with /*! are left alone. Those comments usually hold license notices. It also drops the last semicolon in each block and collapses doubled semicolons. It does not rewrite your values. Colors, units and zeros stay as you wrote them, and rules are never merged or reordered. The output is predictable and easy to trace back to the source, though a build tool such as cssnano can squeeze out a little more.

The tool works both ways. Paste minified CSS into the Minified CSS panel and the CSS panel shows a beautified version, indented two spaces with one declaration per line. That helps when you need to read a vendor stylesheet. For the rest of a page, try the HTML Minifier and the JavaScript Minifier.

Frequently Asked Questions

No. Only characters with no effect on the result are removed, and spaces that change meaning, such as the one between .nav and a, are kept. Test the result once anyway, especially if your stylesheet contains unusual hacks written for very old browsers.
Comments that start with /*! are a common signal that the text must stay, usually a copyright or license notice that the license requires you to keep. Every other comment is removed. If you want to drop a /*! comment too, delete the exclamation mark first.
Not exactly, because comments and your personal spacing are gone for good. You can get a clean, readable version, though. Paste the minified CSS into the Minified CSS panel and the CSS panel shows it beautified with 2-space indentation and one declaration per line. Keep your original source file under version control and minify only copies of it.
No. This minifier removes whitespace, comments and extra semicolons, but it leaves every value as written. It does not shorten colors, drop units from zero values or merge rules. That keeps it safe and easy to check. For those extra savings, use a build tool such as cssnano or Lightning CSS.
Yes, though the gain is smaller. Gzip and Brotli compress repeated text very well, so the difference after compression is modest. Minified files are still smaller to download and quicker to parse, and comments may contain notes you would rather not publish.

Related Tools

JavaScript Minifier

Minify JavaScript by removing whitespace, line breaks, and comments for smaller files, without renaming your code.

Developer Tools

HTML Minifier

Minify HTML by removing comments and collapsing whitespace between tags and inside tags to reduce document size.

Developer Tools

HTML Entity Encode and Decode

Convert special characters to HTML entities and decode HTML entities back to readable text.

Developer Tools

JSON Formatter and Validator

Format, validate, beautify, and minify JSON data with a collapsible tree view and line-and-column error detection.

Developer Tools

Gradient CSS Generator

Create CSS gradients with a visual editor. Build linear, radial, and conic gradients with live preview.

Color Tools

JSON Minifier

Minify JSON by removing whitespace and formatting for compact, production-ready output.

Developer Tools