CSS Beautifier & Minifier — Format CSS Online
Expand minified CSS into readable, indented rules, or strip comments and whitespace to shrink it. The size difference is shown as you type. 100% client-side — your code stays private.
What does a CSS beautifier do? A CSS beautifier re-prints a stylesheet with line breaks and indentation so that each selector and declaration can be read one at a time, without altering which rules the browser applies. Minification is the same operation in reverse: comments and runs of whitespace are removed so the file transfers in fewer bytes. Neither changes selectors, property names or values — only the characters between them.
How to Use the CSS Beautifier
-
Paste the stylesheet — Drop the contents of a
.cssfile, a single rule block, or the compressed output of a build step into the input box. Formatting starts on the first keystroke — there is no upload and no file size limit beyond your browser's memory. - Pick Beautify or Minify — Beautify breaks the token stream onto separate lines and adds indentation. Minify discards every comment and every run of whitespace and joins what is left.
-
Set the indent width — Two spaces, four spaces or a tab. The setting applies one unit per open brace, so a rule nested inside an
@mediablock is indented twice as far as a top-level one. - Read the size badge — The badge next to the buttons compares the length of the input and the output. Green means the result is shorter, red means it grew — beautifying almost always grows a file, which is expected.
- Check the output before you ship it — This is a token reformatter, not a validating CSS parser. Skim the result, and for a production bundle run a dedicated minifier such as cssnano or esbuild in your build step instead.
-
Copy or download — Copy puts the output on your clipboard; Download saves it as
formatted.csswith thetext/cssMIME type.
How the Formatter Works
Everything happens in one pass over a token stream. A small scanner walks the stylesheet character by character and
emits a labelled token for each thing it recognises: a /* … */ comment, a quoted string, an opening or
closing brace, a semicolon, a colon, a comma, a run of whitespace, or a "word" — any unbroken sequence of characters
that is none of the above. A selector such as .card > a:hover is therefore not one token but several,
and a declaration value like 0 auto is two words with a whitespace token between them.
That design keeps the tool fast and dependency-free, and it is the reason it can accept a fragment that would fail a
strict parser — a single rule copied out of DevTools, a block with an unclosed brace, or a file that still contains
// line comments from a Sass source. It also sets the boundary of what the tool can do: there is no
syntax tree, no CSSOM, and no knowledge of which properties exist. Nothing is validated, so a typo in a property name
travels straight through to the output unchanged.
What Beautify emits
Beautify replays the token stream and decides layout from the punctuation alone. An opening brace ends the selector line and increases the indent depth by one; a closing brace decreases it and starts a fresh line; a semicolon ends the current line; a colon is printed with a trailing space. This is why the output of a build tool — one enormous line of compressed CSS — becomes readable immediately: the braces and semicolons that the minifier left behind still carry all the structure that matters.
What Minify removes
Minify keeps every token except comments and whitespace, then concatenates the rest. Those two categories are what a
hand-written stylesheet carries most of, so the size badge usually shows a meaningful drop. It is a filter rather than
an optimiser, though, so the transformations a production minifier performs are not attempted here:
#ffffff stays six digits, 0px keeps its unit, and a final semicolon before a closing brace
is preserved.
Token Reference
The table below is the complete list of things the scanner recognises and what each action does with them. If a behaviour surprises you, the answer is almost always in this table.
| Token | Matched by | Beautify | Minify |
|---|---|---|---|
| Comment | /* … */ and // … to end of line | Kept, on its own indented line | Removed |
| String | Text in single or double quotes, with \ escapes honoured | Kept verbatim | Kept verbatim |
| Open brace | { | Printed as { then a newline; depth + 1 | Kept |
| Close brace | } | Depth − 1, then printed on its own line | Kept |
| Semicolon | ; | Printed, then a newline | Kept |
| Colon | : | Printed with a following space | Kept |
| Whitespace | Any run of spaces, tabs or newlines | Collapsed to a single space | Removed |
| Word | Anything else up to the next delimiter | Kept verbatim | Kept verbatim |
Options and Known Limits
Indent chooses the unit used for one level of nesting — two spaces, four spaces, or a tab character. Four spaces is the default. The choice only affects Beautify; minified output has no indentation to control.
Sort Properties is intended to reorder the declarations inside each block alphabetically by property
name, and Remove Duplicates to drop repeated property: value lines. Both run as extra
passes over the already-formatted text rather than over the token tree, and both currently misbehave — see the warning
below. Leave them unchecked unless you are inspecting the result carefully.
Check the output before using it in a page. Minify removes every whitespace token,
including the spaces that separate the parts of a shorthand value and the descendant combinator in a selector, so
margin: 0 auto becomes margin:0auto and nav a becomes nava.
Sort Properties stops at the first semicolon it meets and returns nothing usable.
Remove Duplicates compares lines across the whole stylesheet rather than within one block, so a
color: red in a second selector is deleted because a first selector already declared it. Use
Beautify for reading and reviewing CSS, and run a real minifier in your build for anything you deploy.
Where Formatting Fits in a CSS Workflow
Minified CSS is a delivery format, not a source format. A build pipeline compiles source stylesheets, then compresses the bundle so the browser downloads fewer bytes; over HTTPS the file is usually gzip- or Brotli-compressed on top of that, which is why whitespace removal alone yields a smaller saving than the raw character count suggests — compression algorithms already handle long runs of repeated spaces well. The larger wins come from removing rules nobody uses, not from removing the newlines between them.
The reverse direction is where a browser-based formatter earns its place. You open DevTools on a live site, find the
rule that is fighting your layout, and the Sources panel hands you a single 200-kilobyte line. Pasting that here and
hitting Beautify turns it into something you can scroll, search and quote in a bug report. The same applies to CSS
pulled from a page's <style> block, from an email template, from an exported design-tool theme, or
from a vendor snippet that arrived without any formatting at all.
Why formatting is not the same as validating
A formatter changes only the characters between tokens. It cannot tell you that flex-diretcion is
misspelled, that a colour has insufficient contrast, or that a rule is never matched by any element on the page —
those questions need a linter, a contrast checker and coverage tooling respectively. Treat a clean, indented result as
evidence that the braces balance and nothing more. If the output looks structurally wrong, the usual cause is an
unclosed brace or an unterminated comment earlier in the input, and the point where the indentation goes astray is a
good place to start looking.
One habit is worth adopting whichever direction you are going: keep the formatted version and the deployed version in separate files. Editing a minified bundle by hand and re-minifying it is how selectors quietly get lost, and a stylesheet that has been through several round trips through different formatters accumulates changes nobody intended.
Frequently Asked Questions
They are opposite ends of the same transformation. Beautifying adds line breaks and indentation so a human can read the stylesheet; minifying removes them so a browser downloads fewer bytes. Neither touches the selectors, property names or values, so the set of rules the browser applies is meant to be identical either way. Source files are kept beautified and checked into version control; the minified copy is a build output that is regenerated rather than edited.
The formatting itself never leaves the page — the tokenizer runs in JavaScript in your tab and no request carries your stylesheet. One caveat worth knowing: the tool also writes the current input and option settings into the page URL so a session can be bookmarked or reloaded. If a stylesheet contains anything you would not paste into a chat message, clear the box before copying or sharing that link.
Not reliably, and you should check it. Minify discards every whitespace token, but whitespace is meaningful in two places in CSS: it separates the components of a shorthand value, and it is the descendant combinator in a selector. That turns padding: 4px 8px into padding:4px8px and .menu li into .menuli. Use this pass for a rough size comparison, and a build-step minifier such as cssnano, Lightning CSS or esbuild for anything you deploy.
That option has a defect: its pass stops as soon as it reaches the first semicolon in the input, so any real stylesheet returns nothing usable. Leave the checkbox unchecked. If you want declarations in a consistent order, use a Stylelint rule such as order/properties-alphabetical-order, which sorts them safely and can be enforced in CI.
No — it compares every line in the whole stylesheet against every earlier line, keyed on the lowercase property:value pair. That means a legitimate color: red in a later selector is deleted because an earlier, unrelated selector already declared it. It is safe only on a single rule block. Genuine duplicate-rule merging needs a tool that understands the cascade.
Partly. Because the scanner works from braces and semicolons, nested blocks indent correctly and // line comments are recognised, so a Sass fragment will usually come out readable. Anything that is not brace-delimited — variables, mixin invocations, @extend, control directives — passes through untouched as plain words. For a real preprocessor file, use your editor's Sass formatter or Prettier, which parse the language rather than its punctuation.
Yes. An at-rule that opens a brace is treated like any other block: the depth counter increases, so the rules inside it are indented one level further than a top-level rule. At-rules that end in a semicolon instead, such as @import and @charset, are printed on their own line. The tool does not reorder at-rules, which matters because @import must stay at the top of a stylesheet to be honoured.
Because you beautified. The badge simply compares the length of the input with the length of the output, so adding indentation and line breaks makes the number grow and the badge turn red. That is the expected result for the Beautify action; a red badge is only a signal worth investigating when you selected Minify.
Nothing is rejected — you get output, but the indentation drifts. The depth counter increases on every { and decreases on every }, and it is clamped at zero, so a missing closing brace leaves everything after it indented one level too deep. That drift is a useful diagnostic: the line where the indentation stops matching your intent is close to the brace you dropped.
Use Cases
Reading a Production Bundle in DevTools
Copy the single-line stylesheet a Vite, webpack or PostCSS build emitted, paste it here, and get an indented version you can scroll and search to find the rule that is overriding your layout.
Cleaning Up an Exported Theme
Take the CSS a design tool, page builder or email template exports — usually one long line with no comments — and reformat it before pasting it into a repository where a reviewer has to read the diff.
Matching a Repository's Indent Style
Reformat a snippet copied from documentation or Stack Overflow to the two-space, four-space or tab convention your project uses, so the pasted block does not stand out in the file or trip a whitespace check.
Finding an Unbalanced Brace
When a stylesheet stops applying halfway down, beautify it and follow the indentation: the point where every following rule sits one level too deep is where the missing closing brace belongs.
Estimating What Whitespace Costs
Run a stylesheet through Minify and read the badge to see how much of the file is comments and indentation, as a quick sanity check before deciding whether a build-step minifier is worth configuring.
Teaching the Cascade
Show a class what a browser actually receives by pasting a compressed stylesheet and expanding it, making the point that whitespace is for people and the braces and semicolons are what carry the structure.