CSS Minifier

What is the CSS Minifier?

The CSS Minifier is a free online tool that compresses a stylesheet by removing everything a browser does not need — comments, blank lines, and the extra spaces and line breaks you add to keep your code readable. The result is the same CSS, equivalent in behaviour, but much smaller. The same tool also works in reverse: paste a minified or messy stylesheet and beautify it back into clean, indented, one-rule-per-line code you can actually read and debug. After every minify it shows the original size, the new size, and the exact percentage saved.

Why minify CSS?

Every kilobyte your stylesheet carries is a kilobyte the browser has to download, parse, and apply before the page can finish rendering. On a fast laptop the difference is small, but on a phone over a slow connection it is real, and Core Web Vitals — the loading metrics Google uses for ranking — reward leaner pages. Minified CSS also compresses better over the wire and is what you ship to production. Beautified CSS is what you keep in source control and read while you work, so most teams use both forms of the same file.

How to use it

1. Paste or type your CSS into the input box.
2. Click Minify to strip comments and whitespace, or Beautify to re-indent it for reading.
3. Read the status line — after minifying it tells you the original bytes, the new bytes, and how much you saved.
4. Pick your indentation — 2 spaces, 4 spaces, or tabs — when beautifying.
5. Click Copy to grab the result. Done — no account, no upload, no waiting.

Minify vs. beautify

Minifying makes the file as small as possible: it removes comments, collapses runs of whitespace, drops the spaces around braces, colons, and commas, and removes the final semicolon before each closing brace. Beautifying does the opposite — it puts each selector and declaration on its own line and indents nested blocks so the structure is obvious. Both keep the meaning of your CSS identical; the tool never renames selectors or changes values, and it leaves the contents of strings and url references exactly as written.

Example

Minify a small rule

Input:

/* card */
.card {
    margin:  0  auto;
    padding: 16px;
    color: #222;
}

Output:

.card{margin:0 auto;padding:16px;color:#222}

The comment and indentation are gone and the trailing semicolon is dropped. A full stylesheet usually shrinks by twenty to forty percent, depending on how many comments and how much whitespace it started with.

Common use cases

• Shipping to production — minify your stylesheet right before deploying to reduce page weight and improve load time.
• Reading someone else's CSS — beautify a minified file from a CDN or a build output so you can understand it.
• Debugging — expand compressed CSS to find the rule that is misbehaving.
• Quick size check — see exactly how many bytes a minify saves before deciding whether it is worth a build step.
• Pasting into a ticket or chat — beautify so teammates can read it, or minify to keep a snippet compact.

Why use this one

Most online options give you either a minifier or a beautifier, and many quietly upload your code to a server to do the work. This tool does both directions in one place, shows the real byte savings, and runs entirely in your browser, so your CSS never leaves your machine. That matters when the styles are unreleased or contain internal selectors. It is fast, works on mobile, and needs no signup. For other formats, the HTML Formatter tidies markup, the JSON Formatter beautifies and validates JSON, and the Text Diff Checker compares two versions line by line.

Frequently asked questions