Paste CSS to beautify it into clean, readable code or minify
it for production. Supports all standard CSS including media queries, keyframes and custom
properties. Runs entirely in your browser — your code is never uploaded.
When to beautify vs. when to minify
Situation
Use
Why
Reading or editing someone else's minified CSS
Beautify
Makes the structure legible so you can find and change rules
Debugging a style issue
Beautify
Each property on its own line makes it easy to spot typos and conflicts
Before committing to version control
Beautify
Consistent formatting means diffs show only meaningful changes
Shipping CSS to a production server
Minify
Reduces file size, improving page load time and Core Web Vitals
Embedding CSS in a build pipeline output
Minify
Bundlers and CDNs serve the compact version; humans edit the source
What this formatter does (and does not do)
Does: indent each property with your chosen spacing, put each selector and closing brace on its own line, add a blank line between top-level rules, and preserve /* comments */ in Beautify mode.
Does: strip all comments, collapse whitespace, and remove the trailing semicolon before } in Minify mode.
Does not: validate that your CSS is syntactically correct — it reformats what you give it.
Does not: add vendor prefixes (-webkit-, -moz-) or transform property names in any way.
Does not: compile SCSS, Less, or Sass — paste the standard CSS output from your preprocessor.
Does not: upload anything — all processing happens in your browser.
How the formatter works
The formatter reads your CSS one character at a time and tracks a small set of states:
inside a comment (/* … */), inside a quoted string ("…" or '…'),
or at the top level. Special characters — , , ; —
are used to break the input into selectors, declarations, and blocks. The formatter never
needs to understand what a selector or property means; it only cares about the structural
characters. This makes it fast, dependency-free, and reliable across all standard CSS
syntax including @media, @keyframes, @supports,
custom properties (--variable), and calc() expressions.
Is my CSS private?
Yes. The formatting logic runs entirely in your browser using standard JavaScript.
Nothing is sent to a server, so it is safe to paste internal stylesheets, design-system
tokens, or unpublished code. The tool also works offline once the page has loaded.
Frequently asked questions
How much does CSS minification actually save?
It depends on how much whitespace and how many comments are in the original file. Typical hand-written stylesheets minify to 30–60% of their original size. A file with extensive comments and generous spacing can shrink by 70% or more. In practice, minification is most impactful on files larger than a few kilobytes — below that, gzip compression already does most of the work.
Does minifying CSS change how it behaves in the browser?
No. Minification only removes characters that are invisible to the CSS parser — whitespace between tokens, comments, and the final semicolon before a closing brace. The selector names, property names, values, and cascade order are all preserved exactly. A correctly minified stylesheet produces byte-for-byte identical rendering to the original.
Can this tool add vendor prefixes like -webkit- or -moz-?
No. Vendor prefixes require knowing which CSS features need them for which browsers, which changes over time. Adding them correctly is the job of a tool like Autoprefixer (a PostCSS plugin). This formatter only restructures what you give it — it does not add, remove, or rewrite property names or values.
Does it support SCSS or Less?
No — this tool parses standard CSS only. SCSS and Less use additional syntax (nesting, variables with $ or @, mixins) that is not valid CSS. To format SCSS or Less, you need a dedicated formatter for those languages. You can, however, paste the compiled CSS output of your SCSS/Less build and format that.
Why does the beautifier keep my comments?
Comments are meaningful in development: they explain intent, mark sections, and disable rules during debugging. Beautify mode preserves them so you can still read and understand the code. Minify mode strips comments because they add bytes with no effect on rendering — use Minify only for production output you will not edit again.
How does the formatter handle media queries and keyframes?
The formatter tracks brace nesting depth, so rules inside @media, @keyframes, @supports, and other at-rules are indented one extra level. Each inner rule block gets its own indented property lines and its own closing brace on a separate line, matching the output you would expect from a code editor.