CSS Formatter & Minifier

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Formatter & Minifier

This formatter re-indents a stylesheet by brace depth, or strips it to the smallest text that still parses.

How it works

It scans for the three characters that carry CSS structure — { } and ; — indenting one level per open brace and putting each declaration on its own line. Minify removes comments and every optional space: around braces, colons, semicolons, and commas, plus the final semicolon before a closing brace, since the brace ends the declaration anyway. Nothing is reordered and no value is rewritten.

When to use it

  • Reading a minified stylesheet pulled from a live site or out of devtools.
  • Cleaning up CSS pasted from a design tool or a code generator.
  • Getting a rough size figure for a stylesheet before wiring up a build step.
  • Making a hand-edited file consistent before committing it.

Watch out for

  • Both modes delete comments, including a /*! ... */ banner that a dependency's license requires you to keep.
  • A semicolon inside a value breaks the beautifier. url(data:image/svg+xml;base64,...) contains one, so an inlined data URI gets a line break dropped into the middle of it and the rule stops working. Minify handles that case; beautify does not.
  • Minifying here only removes whitespace. A real minifier also merges duplicate rules and shortens values (#ffffff to #fff), so the size you measure here is not the size your build tool will produce.
  • Preprocessor sources are indented by braces alone. SCSS nesting will look right, but @mixin, & and variables are passed through unexamined.

Not the right tool for: Production minification. cssnano or Lightning CSS parse the stylesheet and make transformations this cannot safely make.

Frequently Asked Questions

How much does minifying CSS reduce file size?

Minifying typically removes 10–30% of CSS file size by removing whitespace, comments, and redundant semicolons. Combined with gzip compression on the server, actual transfer size reduction can be 60–80% compared to uncompressed, unminified CSS.

Does this handle CSS custom properties (variables)?

Yes — CSS variables (--color-primary: #5C5BFE) are preserved and formatted normally. The formatter does not evaluate or inline variable values; it treats them as opaque string values.

Should I minify CSS for development?

No — minify only for production builds. Minified CSS is unreadable and makes debugging very difficult. Use your build tool (Vite, webpack, esbuild) to automatically minify in production. Keep formatted source in version control.

How to Use CSS Formatter & Minifier

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.