CSS Beautifier / Minifier

About CSS Beautifier / Minifier

The CSS Beautifier does the two things you need when a stylesheet is unreadable: expand it, or squeeze it. Beautify takes CSS that arrived as one enormous line — out of a build, a page inspector, or a theme you bought — and rebuilds it into indented rules, one declaration per line, with each selector in a list on its own line when the list gets long. Minify runs the other way, collapsing a stylesheet down to a single line and dropping every comment except the licence header. Neither mode works by regex over the text: the CSS is parsed into rules, declarations, at-rules and comments first, which is why a semicolon inside `content: ";}"` and a comma inside `url(data:image/png;base64,…)` come out the other side intact. Everything happens in your browser, so an unreleased stylesheet is never uploaded anywhere.

Key features

• Beautify and minify from one toggle, with the output re-running on every keystroke
• A real parser rather than find-and-replace — strings, comments and unquoted url() values are recognised and passed through character for character
• Indentation of 2 spaces, 4 spaces or tabs, and an Expanded or one-rule-per-line layout
• Selector lists split one per line automatically when they pass 80 columns, or always, or never — your choice
• Long multi-part values — box-shadow stacks, transition lists, gradients, font stacks — wrap one part per line instead of running off the edge, and grid-template-areas prints one row string per line so the grid is drawn in the source
• Modern CSS understood: nesting with &, @media, @supports, @container, @layer, @keyframes, @font-face and custom properties, which keep their value exactly as written because a --variable holds an arbitrary token stream rather than a CSS value
• Comments preserved when beautifying, including a comment that trailed a declaration — it goes back onto that same line
• Minify keeps bang comments, because that is where the licence header lives
• Optional value shortening on minify: hex colours folded to lower case and to three digits, redundant zeros trimmed, zero lengths reduced to 0, and empty rules dropped
• Tolerant of broken input — an unclosed block, a stray brace or a half-typed rule still formats, and is reported as a warning rather than an error
• A statistics row counting rules, selectors, declarations, custom properties, media queries, comments and !important declarations
• Syntax highlighting in both panes, plus copy to clipboard and download as a .css or .min.css file
• Runs entirely in your browser — nothing you paste is uploaded

How to use it

1. Paste your CSS into the left pane, replacing the sample.
2. Pick Beautify to expand the stylesheet, or Minify to collapse it.
3. For Beautify, choose the indentation, whether rules are Expanded or kept to one line each, how selector lists should break, and what to do with blank lines.
4. For Minify, choose Full to also shorten colours and zeros, or Safe if you want whitespace and comments removed and nothing else touched.
5. Read the result on the right — it re-runs as you type — and check the badges underneath for the rule counts and any warnings.
6. Copy the output, or download it as a .css or .min.css file.

Tips & common mistakes

• Minify reports the size saving as a percentage next to the output. It is measured against the text you pasted, so beautified input will always show a bigger number than input that was already compact — compare against your build output, not against the sample.
• Safe minify removes only whitespace and comments. Full minify additionally lower-cases and shortens hex colours, trims redundant zeros, drops units from zero lengths, and removes rules whose body is empty. If you are minifying someone else’s stylesheet and want to be able to diff the result, use Safe.
• Zero lengths lose their unit; zero times, angles and percentages keep theirs. `margin: 0px` is the same as `margin: 0`, but `transition-duration: 0` is invalid where `0s` is fine, and `rotate(0)` means something different from `rotate(0deg)`.
• The contents of calc(), min(), max() and clamp() are never touched. Those functions type-check their arguments, so `calc(0px + 1em)` has to keep the unit — `calc(0 + 1em)` is not valid CSS.
• Nothing is merged or reordered. Two rules with the same selector stay two rules, and a property declared three times keeps all three declarations, because whether a duplicate is dead or a deliberate fallback for an older browser depends on the page — which a formatter cannot see.
• Custom property values are passed through exactly as written, whitespace aside. The value of a --variable is a token stream that only means something when var() puts it somewhere, so re-spacing it would be guesswork.
• A comment starting with a bang survives minification. Put your licence header in one — losing it during a build is a licensing problem, not a cosmetic one.
• This is a formatter, not a linter: unknown properties, misspelled units and half-typed rules all format without complaint. The output is still a useful hint, though — a block that indents somewhere you did not expect usually marks a brace you forgot to close, and unclosed blocks and unterminated strings are flagged as warnings.
• Use "One rule per line" to scan a large stylesheet. It gives every rule a single line, which makes an overview of a few hundred selectors readable in a way that a fully expanded file is not.
• The !important badge counts how many declarations use it. It is worth a look on inherited CSS — a specificity war is much easier to see as a number than by scrolling.

Related tools