CSS Formatter & Minifier

How to use the CSS formatter

1. Paste your CSS into the input box: a minified stylesheet, a snippet from developer tools or a whole file.
2. Click Beautify to put each declaration on its own line with consistent indentation.
3. Click Minify to remove comments and whitespace; the tool shows how many bytes you saved.
4. Copy the output into your project.

All processing happens in your browser, and your stylesheets are never uploaded or stored.

Why format or minify CSS?

CSS (Cascading Style Sheets) describes how HTML is displayed. A stylesheet is a list of rules, each made of a selector and a block of declarations (property: value;). Browsers ignore most whitespace, so the same rules can be written readably or compressed into a single line.

Beautifying is useful when you need to read or edit CSS that arrived minified, for example a third-party theme or a stylesheet you are debugging on a live site. Minifying is for production: removing comments, line breaks, indentation and the final semicolon in each block makes files smaller, so they download faster. Minification complements, rather than replaces, gzip or Brotli compression on the server.

Here is the same rule both ways:

.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

Common CSS errors and how to fix them

Browsers do not stop at a CSS error. They skip the invalid declaration or rule and carry on, which is why a typo often causes just one style to "silently" not apply. Formatted CSS makes these problems far easier to find.

Missing semicolon. The declaration after it is swallowed into the previous value and both become invalid:

.title {
  color: #222
  margin-bottom: 1rem;
}

Add the semicolon after #222. In beautified output, two properties ending up on the same logical line is a giveaway.

Unbalanced braces. A missing } makes the following rules part of the previous block. If indentation suddenly jumps a level after formatting, look for the missing brace just above.

Missing units. Apart from zero, lengths need a unit: margin: 10; is invalid, margin: 10px; is correct. Unitless values are only valid for properties that accept plain numbers, such as line-height, opacity or z-index.

Invalid selectors in a list. If one selector in a comma-separated list is invalid, the whole rule is dropped. This often happens with vendor-specific pseudo-elements:

/* If either selector is unsupported, neither gets the style */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }

Write separate rules, or use the standard ::placeholder.

Is minification safe?

Whitespace removal is safe in almost all cases, but a few details matter:

Tips and best practices

• Keep the readable source in version control and generate minified files during the build, ideally with source maps for debugging.
• Group related declarations consistently (layout, box model, typography, visuals) so rules are easy to scan.
• Use CSS custom properties (--brand: #0b5ed7;) instead of repeating colour values.
• For inline <style> blocks inside markup, the HTML formatter may be more convenient.

Frequently asked questions

Does minifying CSS change how my site looks?

No. A correct minifier only removes characters the browser does not need, such as comments and whitespace outside strings. The rendered page should be identical.

How much smaller will my CSS get?

It depends on how the file was written. Heavily commented, generously indented stylesheets shrink more than already compact ones. The tool shows the exact before and after size for your file.

Can I un-minify CSS?

Yes, that is what beautifying does. Indentation and line breaks are restored, but comments removed during minification cannot be recovered.

Does it support SCSS or Less?

The tool is designed for plain CSS. Simple SCSS often formats acceptably, but features like nested rules with mixins or Less operations may not be handled correctly.