Skip to content
Utilboxes

CSS Formatter

Format CSS with consistent indentation and spacing, or minify it for production.

Runs entirely in your browser

How to use the CSS Formatter

  1. 1Paste your stylesheet.
  2. 2Press Format to expand it, or Minify to compress it.
  3. 3Choose indentation and whether each selector goes on its own line.
  4. 4Copy or download the result.

How it works

The formatter walks the stylesheet character by character, tracking brace depth so nested structures indent correctly. That handles media queries, supports queries, keyframes and native CSS nesting, all of which put rules inside rules.

Strings, url() values and comments are tracked as their own states, so a semicolon inside a url() or a brace inside a string does not confuse the depth counter — a common failure in naive formatters.

Minifying removes comments and unnecessary whitespace, collapses the space around braces, colons and semicolons, and drops the final semicolon in each block. It deliberately stops short of rewriting values or merging rules, since those transformations can change behaviour in edge cases.

Everything runs in this page. Nothing you paste is transmitted, logged or stored, which is what makes it safe to drop a production payload in here while you are debugging.

Frequently asked questions

Does it handle CSS nesting and media queries?
Yes. Brace depth is tracked properly, so nested rules, media queries, supports blocks and keyframes all indent correctly.
Are my comments kept?
Formatting keeps them. Minifying removes them, which is usually what you want in production.
How much does minifying save?
Usually 20–35% on a formatted stylesheet before gzip. Well-organised CSS with lots of indentation saves the most.