Skip to content
ToolBoxGeniehome

CSS Formatter

Developer Tools · Added

Format CSS with consistent indentation, or minify it for delivery. The parser tracks strings, comments and url() bodies, so a brace inside a content string or a semicolon inside a data URI cannot be mistaken for structure.

Mode

Processed in your browser. Nothing you paste is uploaded.

How to use the css formatter

  1. 1Paste your CSS.
  2. 2Choose Beautify to expand it with one declaration per line, or Minify to compress it.
  3. 3For beautifying, pick two spaces, four spaces or tabs.
  4. 4For minifying, choose whether to drop comments. A /*! … */ licence header is kept either way.
  5. 5Copy the result or download it as a file.

Examples

Expanding a minified stylesheet

Input
.card,.card--wide{display:flex;padding:1rem}
Result
Each selector on its own line, each declaration indented and spaced

Selector lists are split one per line, which makes a long list of selectors readable and diffs far easier to review.

Minifying for delivery

Input
A formatted stylesheet with comments and indentation
Result
One line, comments dropped, redundant final semicolons removed

Savings of 15–25% before compression are typical. After gzip the difference is much smaller, because gzip is already very good at repeated whitespace.

A data URI that would break a naive minifier

Input
a{background:url(data:image/png;base64,AAA)}
Result
The url() body is returned unchanged

The semicolon inside the data URI is not the end of a declaration. url() bodies, quoted strings and comments are all captured as units before any whitespace is touched.

About the css formatter

What a CSS parser has to get right

CSS looks like it can be processed with search and replace, and mostly it can — right up to the point where it cannot. Three constructs can contain characters that otherwise mean something structural: a quoted string can contain braces and semicolons, a url() body can contain them unquoted, and a comment can contain anything at all. A minifier that collapses whitespace across the whole file will corrupt every one of them.

The consequences are quiet. content: " Note: " losing its spacing does not throw an error; it just renders differently. A data URI truncated at its first semicolon does not fail loudly; the background simply does not appear. Because nothing breaks visibly at build time, these bugs tend to be found by users rather than by developers, which is why this tool captures all three as units before touching anything.

Formatting as a diff tool

The most useful thing about a beautifier is often not readability but comparability. A stylesheet that arrives minified, or written in someone else's brace style, produces a diff where every line has changed and nothing can be reviewed. Running both versions through the same formatter first reduces that to the lines that genuinely differ.

Splitting selector lists one per line serves the same purpose. A rule with eight selectors on one line shows up in a diff as a single changed line no matter which selector moved; split across eight lines, the change is exactly one of them. It costs a little vertical space and repays it the first time you have to review someone else's stylesheet.

Frequently asked questions

Does it change my CSS, or only its layout?
Only its layout. Nothing is reordered, no shorthand is expanded or collapsed, no vendor prefixes are added or stripped, and no rule is dropped for being unsupported or apparently redundant. Optimising minifiers do some of that and are useful, but they also mean the rules reaching the browser are not quite the rules you wrote. This tool deliberately does not, so the output is always something you can reason about.
Does it handle nesting and modern at-rules?
Yes. Native CSS nesting, @media, @supports, @container and @layer all work, because indentation follows brace depth rather than a list of recognised keywords. An at-rule without a block, such as @import or @charset, ends at its semicolon and is handled separately.
Will minifying break a content string?
No, and this is the case worth testing in any CSS minifier. Quoted strings are captured before whitespace is collapsed, so content: " keep me " keeps its spacing exactly. A minifier that strips whitespace globally silently rewrites that value, and the damage only shows up on the page.
How much will minifying actually save?
Usually 15 to 25 per cent of the raw file. Before you act on that, check what your server sends: gzip and Brotli compress repeated whitespace extremely well, so a minified stylesheet is often only a few per cent smaller than a formatted one once transferred. Minifying is worth doing, but it is a smaller win than the raw numbers suggest.
Is my stylesheet uploaded?
No, and there is no build step behind it either. The parser is a few kilobytes of JavaScript that arrived with this page, which has a practical consequence beyond privacy: once the page has loaded, the tool works on a train with no signal, behind a corporate firewall that blocks everything unfamiliar, and on a machine where you are not allowed to install Node to run a minifier locally.

Related tools