What this does
Two transformations on the same box of CSS, in either direction. Minify strips comments and collapses the stylesheet to a single line, then reports the before and after size in bytes and the percentage saved. Beautify goes the other way: one declaration per line, nested at-rules indented, using 2 spaces, 4 spaces or a tab depending on the Indent dropdown. Both are lexical passes rather than a full CSS parser, which is why they are fast enough to run on every click inside the page — the stylesheet is never uploaded.
How do I minify a stylesheet?
- Paste or type CSS into the left box (it starts with a sample card rule).
- Click Minify. The result appears on the right.
- Read the size line at the end of the toolbar — the built-in sample reports
186 B → 140 B (−25%). - Click Copy to put the output on the clipboard.
The minifier removes /* … */ comments, collapses every run of
whitespace to one space, tightens the spaces around { } : ; ,, and
drops the semicolon before a closing brace.
What does minified output actually look like?
/* head */
a {
color: red;
font-size: 12px;
}
→ a{color:red;font-size:12px}
Note the missing semicolon after 12px and the absent comment. Run
Beautify on that one-liner and you get the original structure back, though not
the comment — it is gone for good.
Will minifying break calc() or child combinators?
No. Those are the two cases a naive whitespace-squashing regex ruins, and both
are handled deliberately. Spaces around >, ~ and
+ survive, so .a > .b { color: red } minifies to
.a > .b{color:red} rather than an invalid
.a>.b descendant mix-up. Spaces inside calc() are
left alone too, so calc(100% - 20px) keeps the space around the
minus sign that CSS requires. The beautifier is parenthesis-aware in the same
spirit: a semicolon inside url(data:image/png;base64,AAAA) is not
treated as the end of a declaration.
What will this minifier not do?
It only removes bytes that carry no meaning. It does not shorten
#ffffff to #fff, merge duplicate selectors, drop
overridden declarations, reorder properties, add vendor prefixes, or strip
rules that no element matches. If you need that level of rewriting, a build
step with cssnano or Lightning CSS is the right tool; this is for the quick
case where you want a stylesheet smaller or readable right now. One caveat
from the lexical approach: comment-like text and structural characters inside a
quoted string — content: "a;b" — are not protected, so check the
output if your CSS leans on string values.
Why beautify CSS at all?
Usually to read someone else's shipped stylesheet. A minified bundle pulled from a page's network tab is one enormous line; running it through Beautify makes it diffable and searchable, and at that point you can drop two versions into the text diff tool to see what a deploy changed. It is also useful on hand-written files where the indentation has drifted, since the output is regenerated from scratch rather than patched. For sibling formatters, see the SQL formatter, the JSON formatter, and the SVG optimizer.