CSS Formatter and Minifier

Minified CSS from a build, a CDN or a browser’s dev tools is one unreadable line. This tool formats it — one declaration per line, selectors split at commas, nested rules and @media blocks indented — or does the reverse and minifies your own CSS for production. It reads the stylesheet the way a browser does, so it never cuts a string, a comment, an escape or a url(…) in half, and it handles modern CSS: nesting with &, @layer, @container, and custom properties whose values contain braces. As it reads, it checks for the mistakes that silently break a stylesheet — a block that is never closed, a string that runs to the end of the line, a bracket that doesn’t match — and gives the line and column.

1. Paste CSS, or press “Try an example”.
2. Choose Format or Minify.
3. For formatting, choose 2 spaces, 4 spaces or tabs, whether each selector gets its own line, and whether to keep comments.
4. If there is an error, the message gives the line and column of the opening brace, quote or bracket that was never closed.
5. Copy the result. When minifying, the footer shows the size before and after.

• Formatting and minifying only change whitespace and comments. The minifier does not shorten colours, merge rules or drop units — those rewrites save little after gzip and are where minifiers introduce visual bugs. Use a build tool such as Lightning CSS or cssnano if you want them.
• It checks structure, not meaning: an unknown property or an invalid value is formatted as written. Browser dev tools will tell you which declarations they ignore.
• Sass, Less and Stylus syntax (variables with $ or @, mixins, // comments) is not CSS and may be reported as an error.
• Custom property values (--name: …) are kept exactly as written, including their spacing, because var() reads them back as written.
• Input is limited to 5 MB.
• Everything runs in your browser. The stylesheet you paste is never uploaded or stored.

Not with this tool. It removes comments, line breaks and the spaces around commas and the >, + and ~ selector combinators, plus the last semicolon in each block. It keeps the space between descendant selectors (nav a), the spaces calc() needs around + and −, and every string exactly. The tests compare the browser’s own reading of the stylesheet before and after.

By convention, a comment starting with /*! is a licence or copyright notice that must stay with the code. Minifiers such as cssnano and esbuild keep them too.

Yes. Nested rules, including ones starting with & such as &:hover, are indented under their parent with a blank line before each, the same way as rules inside @media.

Usually 15–30% before compression, depending on how many comments and how much indentation the source had. Your server’s gzip or Brotli compression then makes both versions much smaller, and the difference between them shrinks.

Every { needs a matching }. The error points at the { that is still open when the file ends — usually a rule just above a missing }, or a } that was deleted along with a declaration. Browsers treat everything after it as part of that rule, which is why styles further down the file stop working.